定位3格在一個div

我面臨着css problem.basically我有主div標記和3 div的類名爲pic_con，body_con和msg_con。 div msg_con長度和高度取決於它的文本。如果文本太長，它應該有超過一行來顯示all.look圖片。第一個用小文本，第二個用大文本..div msg_con有minimem寬度和最大寬度。我想定位這3個div看起來像在圖片中。 enter image description here 定位3格在一個div

<div id="apDiv1"> 
    <div id="div_id_1" class="msg_w_1"> 
     <div class="pic_con"> 
      <div class="body_con">small icon"</div> 
      <div class="msg_con">hi</div> 
     </div> 
     <div id="div_id_2" class="msg_w_1"> 
      <div class="pic_con"> 
       <div class="body_con">small icon"</div> 
       <div class="msg_con">hey this is multiline text</div> 
      </div> 
     </div>

我的CSS

.pic_con { 
    float:left; 
    background-color:#096; 
} 
.back_con { 
    float:left; 
    background-color:#3CC; 
    border:5px solid red; 
    width:150; 
} 
.body_con { 
    /*float:left;*/ 
    margin:0 auto 0 auto; 
    background-color:#C39; 
    border:5px solid red; 
}

我設置flote離開，但它不能正常工作。

來源

2014-03-25 Fast Snail

很抱歉，但我想你錯過了「圖片」 –

是的，我現在加入它 –

你能告訴我們你的CSS？ –

據我瞭解，你想要一個接一個地排列它們。

您可以使用float: left來管理此問題。此外，你應該設置父div爲clear: both。

我看到的另一件事是，你沒有關閉pic-con DIVs。試試這個：

HTML

<div id="apDiv1"> 

<div id="div_id_1" class="msg_w_1"> 
    <div class="pic_con">pic</div> 
    <div class="body_con">small icon</div> 
    <div class="msg_con">hi</div> 
</div> 
<div id="div_id_2" class="msg_w_1"> 
    <div class="pic_con"></div> 
    <div class="body_con">small icon"</div> 
    <div class="msg_con"> hey this is multiline text</div> 
</div> 
</div>

CSS

.msg_w_1 { 
    clear: both; 
} 

.msg_w_1 div { 
    float: left; 
}

編輯：我沒有看到一個包含CSS更新後，當我張貼了這個。嘗試從您的CSS類中刪除float: left和width，然後再嘗試使用

來源

2014-03-25 22:04:17

謝謝你，因爲它工作正常 –

使用display:table樣式。

.msg_con { 
    display : table 
}

這使得.msg_con表現得象一個表的元件，但是根據其內容的長度（高度和寬度）重新大小。

來源

2014-03-25 22:07:25 Sark

定位3格在一個div

回答

相關問題