Question

我的页面中有一个HTML表格，我正在尝试用div和CSS替换它。基本上，它是一个3x3的桌子，中间有可扩展的内容，固定大小的边缘和角落，背景中的图像，给所有东西一个漂亮的阴影外观。

我已经阅读了许多关于将％与像素混合的文章和条目，但它们似乎都没有我正在寻找的东西。

这是我到目前为止所拥有的：

<html>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red; ">
   <div style="width: 80%; height: 100%;">
    <div style="clear: both; height: 100%;">
     <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
     <div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
      </div>
     </div>
   </div>
   <p>Text down here...</p>
</body>
</html>

如何在黄色旁边显示蓝色div？我可能完全偏离这里。我非常感谢任何帮助。

Answer 1

如果语义顺序不重要，它可以将你的右div移到你的内容div之上：

<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!...</div>

Answer 2

很抱歉直言不讳，但你的方式错了。问题不是“表格与div”之一，而是“表格与网络标准”之一。当你开始使用CSS将所有内容包装在<div>中并完成它时，这非常诱人，当真正重点是使用正确的HTML元素来表示它包含的数据时，并使用CSS来设置它的样式。

考虑到这一点，页面的实际内容是什么？它是数据列表吗？一系列段落？也许它实际上是表格数据，在这种情况下表格是正确的选择？一旦你确定了，并编写了相应的HTML，那么你可以从CSS开始。有时您可能需要添加额外的HTML元素来实现您需要的样式，只要您已经挖掘出结构并且对这些元素进行了长时间的考虑，这是可以的。

Answer 3

您将要使用three-column negative margin trick（demo）。

Answer 4

如果您想要的是圆角，这可能是一个好主意。

HTML：

<div class="box">
  content here
  <div class="topleft corner"></div>
  <div class="topright corner"></div>
  <div class="bottomleft corner"></div>
  <div class="bottomright corner"></div>
</div>

CSS

.box{
padding:50px;
position:relative; /*this allows positioning child elements relative to this one*/
}

.corner{ position:absolute; width:50px;}

.topleft{ top:0; left:0; background-image:url(tlcorner.gif);}
.topright{ top:0; right:0; background-image:url(trcorner.gif);}
.bottomleft{ bottom:0; left:0; background-image:url(blcorner.gif);}
.bottomright{ bottom:0; right:0; background-image:url(brcorner.gif);}

Answer 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:)</title>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red;">
    <div style="height: 100%; margin-right: 20%;">
      <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
      <div style="float: left; width: 80%; height: 100%; background-color: yellow;">

This is my Content! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      </div>
      <div style="float: left; width: 30px; height: 100%; background-color: blue;">R</div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <p>Text down here...</p>
</body>
</html>

Answer 6

W3C有几个即将推出的解决方案。目前正在Chrome，Firefox和Internet Explorer（http://dev.w3.org/csswg/css3-grid-layout）中实施最符合您需求的产品。

CSS Grid layout

使用CSS从表切换到div

6 个答案: