Question

我想要这个设计：

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>

我遇到了这个问题：

http://www.screencast-o-matic.com/watch/c6lrXsXyQ

Answer 1

尝试以下方法。 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>

Answer 2

不确定您的目标是什么，但您可以尝试what I've done here。您应该只对文档中的唯一元素使用id，因此如果您需要多个元素，请将它们重新指定为类。这里不需要display: table-cell;。

HTML：

<div class="mainbulk">
    <div class="ads">
    ads would, hypothetically, be placed here if this were actually an actual website.
    </div>
    <div class="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>

CSS：

.mainbulk {
    padding: 1.5em 2% 1.5em .5em;
    border: 1px solid #000;
}
.ads {
    width: 7.5em;
    float:right;
    text-align: right;
    border: 1px dotted #f00;
}
.textcontent {
    max-width: 40em;
    float: right;
    border: 1px dotted #00f;
}

Answer 3

我相信我可以帮忙！

你要做的很简单..假设你想让div1和div2占据屏幕的100％。只需使用id容器创建一个div。将填充设置为：0 160px 0 0，并将box-sizing和-webkit-box-sizing设置为：border-box ..所有这一切都是将内容从屏幕右侧推出。边框设置将保持宽度100％而不是默认的100％+ 160px。

现在你可以在容器中放置div1 ..如果一切正确，你会在右侧看到一个160px的空白区域。

你接下来要做什么..你必须在你的HTML中把div2放在div1之前..之后设置一些css属性..Div2应该向右浮动并具有以下边距：0 -160px 0 0。

div位于正确的位置，因为div1不受div2的干扰，因为它位于div 1禁止的区域，这要归功于容器的填充。但是Div2并不局限于这个区域，因为负边缘。

你还有最后一件事要做..让我们说containerDiv有很好的边框和简单的背景颜色。当div1更长的时候，div2的div容器将不会为div2伸展，因为它是浮动的。这就是为什么你把它放在div1的最后：。

此行在网页上创建一条新线，此处旁边没有浮动元素。换句话说，它会拯救你！

问题是将divs彼此相邻？

3 个答案: