问题是将divs彼此对齐？

I want this design:

我想要这个设计:

DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo

How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.

我该如何解决这个问题?我尝试过像左右浮动的东西,但我不能让它们在同一条线上。

I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.

我希望div 2始终存在,而div1的最大宽度为40em,但调整大小以允许div 2始终显示是否必要。

My code:

<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>

and

<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>

I'm encountering this problem:

我遇到了这个问题:

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

3 个解决方案

#1

Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.

不确定你在追求什么,但你可以尝试我在这里所做的。您应该只对文档中的唯一元素使用id,因此如果您需要多个元素,请将它们重新指定为类。显示: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;
}

#2

Try the following. ids are used for unique content and should be used once only per page. Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).

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

#3

I believe I can help!

我相信我可以帮忙!

What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.

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

Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.

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

What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.

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

The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.

div位于正确的位置,因为div1不受div2的干扰,因为它位于div 1禁止的区域,这要归功于容器的填充。然而,由于负边际,Div2不限于此区域。

There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .

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

This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!

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

#1