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的相互

回答

相关问题