Question

我的HTML和CSS有几个问题，这是我的HTML：

<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都在标签的style属性中，这就是我想要的： http://s4.postimg.org/4dl41pd9p/how_i_want.png

这是我得到的： http://s4.postimg.org/ggqfp9obx/what_i_get.png

正如你所看到的，假设一个在另一个之下的3个div彼此重叠，div中的文本在某种程度上在它之外，div的高度保持为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>

Answer 1

获得此布局的最可靠方法是使用表格。 注意：使用网格布局做得更好，但浏览器支持会有所不同，表格是最可靠的方式，但不是最好的方式

所以基本上，你有一个这样的表：

<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>

Answer 2

尝试将它们全部置于绝对位置。然后你可以独立定位每一个。

CSS问题，彼此div

2 个答案: