CSS問題，div的相互

我有幾個問題，我的HTML和CSS，這是我的HTML：CSS問題，div的相互

<div class="picCommnet" style="background-color:#FFF8AD; padding: 5px 0 5px 0; border: 2px dotted #d2d9e7;"> 
    <div style="width:20%; float:right;background-color: yellow;"> 
      <img src=""> 
    </div> 
    <div style="width:75%; float:right; padding: 5px 0 5px 0; border: 2px dotted #d2d9e7;"> 
      <div style="width:100%; background-color: green;"> 
       מתן בדיקה 
      </div> 
      <div style="width:100%; background-color: paleturquoise;"> 
       check comment 
      </div> 
      <div style="width:100%; background-color: red;"> 
      </div> 
     </div> 
     <div style="width:5%; float:right;"> 
      <img src=""> 
     </div> 
</div>

所有的CSS是在標籤的樣式屬性，這是我怎麼想是： http://s4.postimg.org/4dl41pd9p/how_i_want.png

這是我所得到的，而不是： http://s4.postimg.org/ggqfp9obx/what_i_get.png

正如你所看到的，3周的div是假設是一個低於其他都超過對方，和的div內的文本是某種outsid電子和它的高度仍然是0.

我該如何解決它？

編輯：這是我嘗試添加代替的div表：

<table> 
    <tbody> 
     <tr> 
     <td rowspan='3'>Remove Comment Pic</td> 
     </tr> 
     <tr> 
     <td>Comment UserName</td> 
     <td>Comment Text</td> 
     <td>Likes</td> 
     </tr> 
     <tr> 
     <td rowspan='3'>User Profile Pic</td> 
     </tr> 
    </tbody> 
</table>

來源

2014-03-05 Kadosh

發佈現場演示或jsfiddle以獲得更快更準確的響應。 –

這就是我得到的表格：http://s27.postimg.org/5uvuj7x9v/table_i_get.png – Kadosh

最可靠的方法來獲得這種佈局是一張桌子。 注意：使用網格佈局來做這件事要好得多，但是瀏覽器的支持會有所不同，表格是最可靠的方式，但並不是最好的方式。

所以基本上，你有一個表是這樣的：

<table> 
    <tbody> 
    <tr> 
     <td rowspan="3">Yellow box</td> 
     <td>Green box</td> 
     <td rowspan="3">White box</td> 
    </tr> 
    <tr><td>Turquoise box</td></tr> 
    <tr><td>Red box</td></tr> 
    </tbody> 
</table>

來源

2014-03-05 22:26:07

由於某種原因，還有一個表格所有的表格單元互相覆蓋，可能會導致什麼？ – Kadosh

這就是我試圖使用表格：http://s27.postimg.org/5uvuj7x9v/table_i_get.png – Kadosh

你仍然在使用你所有的風格，是不是？爲什麼人們不使用我給他們的代碼，然後說它不起作用？ –

試圖把他們全部的位置是：絕對的。然後你可以獨立定位每一個。

來源

2014-03-05 23:44:10 Haiz

你的意思是每個div？也試圖做到這一點與表沒有表現出任何成功，我已經評論如何看到 – Kadosh

是每個div的例子。使用它與原始樣式與divs，而不是表格。如果你想用表格做，試着給每個人一個ID，然後手動設置它們。 – Haiz

CSS問題，div的相互

回答

相關問題