如何把彼此相鄰3周的div在HTML

Question

這裏是圖片

你好我嘗試把旁邊的3周彼此的div就像在鏈接 （我很抱歉我不能顯示圖片顯然我的等級太低，不能顯示圖片） 如果你不能看到圖片，即時通訊設法顯示3個divs彼此內聯和不會調整大小，即使你改變瀏覽器的大小我怎麼去呢？ 感謝您的時間

這是我的代碼

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>