CSS DIV выравнивание по горизонтали в одной строке

Question

Привет я использовать CSS, чтобы позиционировать свой Div коробку, и это мой результат:

------- 
div i 
box1 i 
------- 
     ---------- 
     i div i 
     i box2 i 
     ---------- 
        ------- 
        i div 
        i box3 
        ------- 

Мне очень жаль, что я не смог загрузить изображение моя точка тратить искать репутация только 2, Ok, давайте продолжим, результат выше, чем я получаю, разбивает каждый div-поле на новую строку, но я не хочу быть таким, результат, который я хочу, выровняет поля 3 div в одну и ту же горизонтальную линию следующим образом:

------ --------- ------ 
    i i  i i 
    i i  i i 
------ --------- ------ 

это мой код CSS, может кто-то исправить мою ошибку?

#divbox1{ 
    display: flex; 
    height: auto; 
    width: 40%; 
    margin-top: 5%; 
    margin-left: -25%; 
    position: relative; 
    border-style: solid; 
    border-color: #888888; 
} 
#divbox2{ 
    display: flex; 
    height: auto; 
    width: 60%; 
    margin-top: 5%; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    border-style: solid; 
    border-color: #888888; 
} 
#divbox3{ 
    display: flex; 
    height: auto; 
    width: 40%; 
    margin-top: 5%; 
    margin-left: 85%; 
    position: relative; 
    border-style: solid; 
    border-color: #888888; 
} 

пункт Добавление: Я хочу, чтобы показать 20% отображение на divbox1 и 3 только поэтому им с помощью -% маржи

Answer 1

Вы используете display:flex; неправильно. Он должен применяться к родительскому контейнеру, чтобы работать так, как вы ожидаете. Вам нужно добавить дополнительный DIV герметизирующего все эту так:

<div id="group"> 
    <div id="divbox1"></div> 
    <div id="divbox2"></div> 
    <div id="divbox3"></div> 
</div> 

После выполнения этого вам нужно будет удалить display:flex; из внутренних див. И добавьте его в группу div. В результате CSS должны выглядеть следующим образом:

#group{ 
display:flex; 
width:100%; 
} 

#divbox1{ 
flex:4; 
margin-top: 5%; 
margin-left: -25%; 
position: relative; 
border-style: solid; 
border-color: #888888; 
} 

#divbox2{ 
flex:6; 
margin-top: 5%; 
margin-left: auto; 
margin-right: auto; 
position: relative; 
border-style: solid; 
border-color: #888888; 
} 

#divbox3{ 
flex:4; 
margin-top: 5%; 
margin-left: 85%; 
position: relative; 
border-style: solid; 
border-color: #888888; 
} 

Добавление flex:4; или flex:6; для каждого внутреннего DIV в основном говорят Flexbox какого размера вы хотите, чтобы ваши див по отношению друг к другу. Затем, по умолчанию, flexbox поместит их по ширине экрана, если у вас нет таких вещей, как min-width на ваших div.

Надеюсь, я помог. Приветствия.

Answer 2

#divbox1{ 
 
    float:left; 
 
    height: 50px; 
 
    width: 10%; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-color: #888888; 
 
} 
 
#divbox2{ 
 
    float:left; 
 
    height: 50px; 
 
    width: 50%; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-color: #888888; 
 
} 
 
#divbox3{ 
 
    float:left; 
 
    height: 50px; 
 
    width: 20%; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-color: #888888; 
 
}

<div id='divbox1'></div> 
 
<div id='divbox2'></div> 
 
<div id='divbox3'></div>

Не используйте

display:flex; 

Вместо этого просто пойти

float:left; 

в каждой коробке. И поиграйте с шириной, вам может понадобиться немного уменьшить значения. и избавиться от этих полей.

Answer 3

Это вы искали ..?

.container { 
 
     width: 960px; /* define your container width */ 
 
    } 
 

 
    .box { 
 
     width: 30%; /* whatever width */ 
 
     height: 200px; /* whatever height */ 
 
     background: #ccc; 
 
     margin: 30px 1%; 
 
     float: left; 
 
    }

<div class="container"> 
 
    <div class="box box1"> 
 
     <!-- your content goes here --> 
 
    </div> 
 
    <div class="box box2"> 
 
     <!-- your content goes here --> 
 
    </div> 
 
    <div class="box box3"> 
 
     <!-- your content goes here --> 
 
    </div> 
 
</div>