我想要这个设计:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
我该如何解决这个问题？我尝试过像左右浮动的东西,但我不能让它们在同一条线上.
我希望div 2始终存在,并且div1的最大宽度为40em,但调整大小以允许div 2始终显示是否必要.
我的代码:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
和
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
我遇到了这个问题:
小智 5
请尝试以下方法.id用于唯一内容,每页仅应使用一次.在某些情况下,表格仍然值得考虑.在处理布局时在div上使用边框也会有所帮助(下面的红色和绿色边框).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
9454 次 |
| 最近记录： |