0

请看一下我构建的这个布局divs：

在此处输入图像描述

首先你可以忽略Header部分

所以Content必须准确地居中在中心并且它有一个固定的宽度，这很容易，但Left Column需要从左侧延伸直到它到达Content，这是困难的部分，因为之间的间隙可以是任何长度Left Column，Content很难知道是什么width设置。

现在我知道这样做很容易，javascript但如果可能的话，我想避免这种情况。

按要求编辑这里是代码：

<div class="left_column"></div>
<div class="content"></div>

.left_column{
   width:100px;
   height:100px;
   float:left;
}

.content{
   width:100px;
   height:100px;
   margin:auto;
   position:relative;
}
4

4 回答 4

1

看看 面向对象的 CSS。特别是，查看他们的网格页面

于 2012-09-25T19:12:30.600 回答
0

我会使用百分比，但比你应该使用的位置少 1%。我发现很多时候浏览器会“四舍五入”一个像素或其他东西，所以如果你的百分比总计为 100%，任何额外的添加都会在下面推一个 div。

例如，如果您想要两个 div，一个在右侧，一个在左侧，则其中一个有width:49%;，另一个width:50%;.

于 2012-09-25T18:42:23.503 回答
0

这可以使用这个 hack 来完成，请试试这个：

div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }

使用此标记：

<div class="header">Header</div>
<div class="wrapper">
    <div class="left-column">Left Column</div>
    <div class="content">Content</div>
</div>

请注意，left-column如果您将屏幕大小调整得过多，则会被剪切。无论哪种方式，我希望它有所帮助。

于 2012-09-25T19:00:33.347 回答
0

尝试百分比？

overflow: auto;
 padding: 10px;
 width: 45%;

尝试左浮动右浮动以及内联显示，您也可以尝试自动宽度，但效果不太好

float:left;
 width:auto;
    height: auto;
    display: inline;

菜单中还使用了另一种技巧

    <div id="mail_menu">
     <ul>
     <li><a href=something</a></li>
    </ul>
</div>

css

#mail_menu {
 position: relative;
 top: 0px;
 left: 0px; /* LTR */
 z-index: 3;
 color: #000;
}
#mail_menu ul {
 list-style-type: none;
}
#mail_menu li {
 display: inline;
 float:left;
 margin: 0px;
 padding: 3px;
}
#mail_menu a {
 color: #000;
 background: #FFF;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 margin: 1px;
 border-color:#CCC;
 border-width:1px 0;
 padding: 2px;
 float:left;
 border-width:1px;
  border-style:solid;
  border-bottom-color:#aaa;
  border-right-color:#aaa;
  border-top-color:#ddd;
  border-left-color:#ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;



}
#mail_menu a:hover {
 color: #0000DD;
 text-decoration: none;
 background-image: url(/images/lyel.png);
 background-repeat: repeat-x;
}

css 到中间的东西

.middle {
 display: block;
 width: 50em;

 margin-left: auto;
 margin-right: auto
}

最后是一些要显示的表值

.td {
display: table-cell;
display:inline
}

.wrap{
 position: inherit;
}

.tr {
display: table-row;
display:inline
}

table {
  border-collapse: collapse;
}
th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}
于 2012-09-25T18:28:32.163 回答