1

我的页面中有一个 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 放在黄色 div 旁边？我可能完全不在这儿了。我将不胜感激任何帮助。

4

6 回答 6

2

如果语义顺序不重要，则可以将右 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>
于 2009-10-17T22:34:17.237 回答
2

Sorry to be blunt, but you're going about this the wrong way. The question isn't one of 'tables vs divs' it's one of 'tables vs web-standards'. It's very tempting when you start out with CSS to wrap everything in a <div> and be done with it, when really the point is to use the correct HTML element to represent the data it contains, and use CSS to style it.

With that in mind, what is the actual content of the page? Is it a list of data? A series of paragraphs? Maybe it is actually tabular data, in which case a table is the right choice? Once you've determined that, and wrote the appropriate HTML, then you can start on the CSS. Sometimes you may have to add extra HTML elements to achieve the style you need, that's okay as long as you've already hashed out the structure and thought long and hard about such elements.

于 2009-10-17T22:37:21.497 回答
1

您将要使用三列负边距技巧( demo )。

于 2009-10-17T22:32:45.213 回答
1

If what you want is rounded corners, this can be a good idea.

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);}
于 2009-10-18T07:47:21.320 回答
0 
<!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>
于 2009-10-17T22:52:09.387 回答
0

The W3C has several upcoming solutions. The one closest matching your need is currently being implemented in Chrome, Firefox and Internet Explorer (http://dev.w3.org/csswg/css3-grid-layout).

CSS Grid layout

于 2012-10-16T11:04:35.363 回答