Положите два Divs Side By Side

Я пытаюсь поставить свои два div бок о бок: но divs под ними раздуваются вверх. Глядя, как это:Положите два Divs Side By Side

Вот мой HTML:

<div class="DSL6"> 
<h3 class="DSLLocation">DSL 6</h3> 
</div> 
<div class="DSLInformation"> 
</div> 
<div class="FTTN10"> 
<h3 class="FTTNLocation">FTTN 10</h3> 
</div> 
<div class="FTTN15"> 
<h3 class="FTTNLocation">FTTN 15</h3> 
</div> 
<div class="FTTN25"> 
<h3 class="FTTNLocation">FTTN 25</h3> 
</div> 
<div class="FTTN50"> 
<h3 class="FTTNLocation">FTTN 50</h3> 
</div>

И CSS:

.DSL6 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    margin-top: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
    float: left; 
    clear; 
} 
.DSLLocation { 
    margin-top: 60px; 
} 
.DSLInformation { 
    width: 850px; 
    height: 150px; 
    background-color: black; 
    float: left; 

} 
.FTTNLocation { 
    margin-top: 60px; 
} 
.FTTN10 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN15 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN25 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN50 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
}

Я посмотрел вокруг, и я пробовал разные ответы (как на другие сайты и переполнение стека), но, увы, проблем не обнаружено.

Что я хочу:

источник

2016-04-18 Thomas Hutton

'clear;' не является допустимым определением свойства CSS. – amphetamachine

Это действительное свойство, но не свойство ** value ** ... вы хотите «clear: both;» скорее всего, или «none», «inherit», «left», «right», «initial» ... –

Кроме того, вы должны, вероятно, показать *, что * вы намерены увидеть, хотите ли вы, чтобы кто-нибудь дал хороший ответ. –

Вы получаете этот результат, потому что ваша общая ширина всех DIV больше, чем на ширине экрана. см. мой измененный css, здесь все div являются встроенными. И еще один - вы должны использовать float: left для отображения div inline.

.wrapper{ 
 
    width: 500px; 
 
} 
 
.DSL6 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.DSLLocation { 
 
    margin-top: 60px; 
 
} 
 
.DSLInformation { 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: black; 
 
    float: left; 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 

 
} 
 
.FTTNLocation { 
 
    margin-top: 60px; 
 
} 
 
.FTTN10 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    float: left; 
 
    display: inline; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN15 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN25 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN50 { 
 
    float: left; 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    border-color: #D3D3D3; 
 
}

<div class="wrapper"> 
 
<div class="DSL6"> 
 
<h3 class="DSLLocation">DSL 6</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
<div class="FTTN10"> 
 
<h3 class="FTTNLocation">FTTN 10</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
</div>

РЕДАКТИРОВАТЬ СУЩНОСТЬ

редактировали html как требование ОП в.

источник

2016-04-18 17:27:02

Спасибо, но я хочу, чтобы черный был рядом. Все пять рядов были бок о бок, поэтому div 1 и 2 бок о бок, затем под ними div 3 и div 4 находятся рядом друг с другом и т. Д. Есть ли все-таки сделать это? –

привет, запустите мой обновленный фрагмент кода. вы хотели чего-то подобного? –

Он все еще отображается в строке. Я хочу два встроенных, затем под ними 2 встроенных и т. Д. –

Положите два Divs Side By Side

ответ

Смежные вопросы