Проблема с divs, не появляющимися рядом друг с другом

Question

У меня проблема с ребенком div s не появляется рядом. Есть два div s, которые появляются в нижней части первого div.

Я пробовал display:inline-block - но безрезультатно.

div.bodyClass { 
 
    background-color: D4BD6A; 
 
    height: 850px; 
 
} 
 
div.navClassItems { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 250px: 
 
} 
 
div.secClass1 { 
 
    background-color: F9E18D; 
 
    display: inline-block; 
 
} 
 
div.secClass2 { 
 
    background-color: F9E18D; 
 
    display: inline-block; 
 
}

<div id="mainbodyWithNav" class="bodyClass"> 
 

 
    <div class="navClassItems"> 
 
    <hr>Main Page 
 
    <br> 
 
    <hr>Metrics 
 
    <br> 
 
    <hr>Contact us 
 
    <br> 
 
    <hr> 
 
    </div> 
 

 

 
    <div class="secClass1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 
    <div class="secClass2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 

 
</div>

Answer 1

попробуйте использовать "поплавок: влево;" вместо

Answer 2

Попробуйте это ...

div.secClass1 
{ 
    background-color:F9E18D; 
    width:50%; 
    float:left; 
} 

div.secClass2 
{ 
    background-color:F9E18D; 
    width:50%; 
    float:left; 
} 

и положить <hr /> непосредственно перед secClass1 DIV так, что она отделяет его от меню выше.

Answer 3

Использование «Float:left» и установить их ширину и в 50% (или ширины контейнера, разделенного на 2):

//below is container class 
container{ 
width: 100%; 
} 
div.secClass1 
{ 
float: left; 
width: 50%; 
background-color:F9E18D; 
display:inline-block; 
} 

div.secClass2 
{ 
float: left; 
width: 50%; 
background-color:F9E18D; 
display:inline-block; 
} 

Answer 4

вам необходимо применить display:inline-block и установить (max)-width для всех детей

.bodyClass { 
 
    background-color: #D4BD6A; 
 
    height: 850px; 
 
    font-size:0 /* inline-block gap fix */ 
 
} 
 
.bodyClass > div{ 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    max-width: 250px; 
 
    font-size:16px /* reset font-size */ 
 
} 
 
[class*="sec"] { 
 
    background-color: #F9E18D; 
 
}

<div id="mainbodyWithNav" class="bodyClass"> 
 
    <div class="navClassItems"> 
 
    <hr>Main Page 
 
    <br> 
 
    <hr>Metrics 
 
    <br> 
 
    <hr>Contact us 
 
    <br> 
 
    <hr> 
 
    </div> 
 
    <div class="secClass1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="secClass2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

Answer 5

Одним из вариантов было бы установить ширину до calc(50% - 125px) и плавайте их слева. См скрипка: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/39/

div.secClass1 
{ 
width: calc(50% - 125px); 
float: left; 
background-color:#F9E18D; 
} 

div.secClass2 
{ 
width: calc(50% - 125px); 
float: left; 
background-color:#F9E18D; 
}