问题对齐div彼此相邻？ [英] Problem aligning divs next to each other?

问题描述

我想要这个设计：

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.

我想要div 2始终在那里，div1有一个最大宽度

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.

我的代码：

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

---

我遇到这个问题：

---

I'm encountering this problem:

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

推荐答案

不太确定您之前的情况，但您可以尝试我在这里做了。您只应在文档中的唯一元素上使用 id ，因此如果您想要多个元素，请将它们重新分配为类。 display：table-cell; 不需要。

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.

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

这篇关于问题对齐div彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！