Как положить 3 дивы рядом друг с другом в HTML

Question

Вот картинка

привет им пытаются поставить 3 дивы рядом друг с другом так же, как в ссылке (Im извините я не смог показать фотографию, видимо, мое звание слишком низкое, чтобы отобразить изображение) , если вы не видите изображение, im пытается отобразить 3 divs inline друг с другом, а не изменяет размер, даже если вы измените размер браузера, как мне это сделать? Спасибо за ваше время

это мой код

body{ 
 

 
} 
 
#wrap{ 
 
    width:auto; 
 
margin:0 auto; 
 
    border:0px solid; 
 
height:200px; 
 
    display:block; 
 
    
 
} 
 
#one { 
 
    width:40%; 
 
    float:left; 
 
    background:red; 
 
} 
 

 
#two { 
 
background:yellow; 
 

 
} 
 

 
#three { 
 
    width:40%; 
 
    float:inherit; 
 
    background:blue; 
 
}

<div id="wrap"> 
 
    <div id="one"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="two"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
</div>

Answer 1

Проверить this fiddle

#wrap:after { 
 
     display: block; 
 
     height: 0px; 
 
     clear: both; 
 
     float: none; 
 
    } 
 
    #wrap div { 
 
     float: left; 
 
     word-break: break-all; 
 
    } 
 
    #one { 
 
     width: 40%; 
 
     background-color: red; 
 
    } 
 
    #two { 
 
     width: 20%; 
 
     background-color: yellow; 
 
    } 
 
    #three { 
 
     width: 40%; 
 
     background-color: blue; 
 
    }

<div id="wrap"> 
 
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
</div>

Answer 2

#two и #three (наследует от родителя, которого нет) не имеют float:left, и вы должны дать width этим элементам. Например, здесь я даю width:32% всем элементам div (#one, #two, #three).

.fl-l 
 
{ 
 
    float:left; 
 
    word-break: break-all; 
 
    width: 32%; 
 
} 
 

 
#wrap{ 
 
    width:auto; 
 
margin:0 auto; 
 
    border:0px solid; 
 
height:200px; 
 
    display:block; 
 
    
 
} 
 
#one { 
 
    background:red; 
 
} 
 

 
#two { 
 
background:yellow; 
 
} 
 

 
#three { 
 
    background:blue; 
 
}

<div id="wrap"> 
 
    <div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
</div>

Answer 3

Чтобы зафиксировать ширину, установить абсолютные значения к wrap элемента.

body {} 
 
#wrap { 
 
    width: auto; 
 
    margin: 0 auto; 
 
    border: 0px solid; 
 
    height: 200px; 
 
    word-break: break-all; 
 
    font-size: 0; 
 
} 
 
#wrap > div { 
 
    height: 100%; 
 
    display: inline-block; 
 
    overflow: auto; 
 
    font-size: 14px; 
 
    } 
 
#one { 
 
    width: 40%; 
 
    background: red; 
 
} 
 
#two { 
 
    width: 20%; 
 
    background: yellow; 
 
} 
 
#three { 
 
    width: 40%; 
 
    background: blue; 
 
}

<div id="wrap"> 
 
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div> 
 
</div>