Css 如何解决相邻div对齐的问题？_Css_Html

Css 如何解决相邻div对齐的问题？

css html

Css 如何解决相邻div对齐的问题？,css,html,Css,Html,可能重复：我想要这个设计： DIV1: auto-size DIV2: 160px divnumberonediv divtwo divnumberonediv divtwo divnumberonediv divtwo divnumberonediv divtwo divnumberonediv divtwo divnumberonediv divtwo 我如何解决这个问题？我试过像左右浮动这样的东西，但我就是不能把它们放在同一条线上我希望div2始终在那里，div1的最大宽度为40e

可能重复：

我想要这个设计：

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

我如何解决这个问题？我试过像左右浮动这样的东西，但我就是不能把它们放在同一条线上

我希望div2始终在那里，div1的最大宽度为40em，但如果需要，请调整大小以允许div2始终显示

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

和HTML

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


这是世界上最令人惊奇的网站。它有一个非常好的设计，是完美的一切。如果有什么是这个网站做不到的，那么什么也做不到，但是我建议在抱怨之前尝试一下这个网站的所有功能
假设这是一个真实的网站，广告就会放在这里。

我遇到了这个问题：

完整源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frotly</title>
<style type="text/css">
body, html {
    font-size: 100%;
    text-align: center;
    padding: 0;
    border: 0;
    margin: 0;
}

#intro {
    border: 0;
    text-align: inherit;
    width: inherit;
}

#content {
    max-width: 50em;
    margin: 0 0 0 .7em;
}
#header {
    background-image: url(images/frotly.gif);
    background-repeat: no-repeat;
    height: 6.25em;
}
#menu {
    text-align: left;
}
#mainbulk {
    text-align: left;
}
#menu a {
    height: 1em;
    text-transform: uppercase;
    padding: 0.15em .6em;
    font-size: 0.9em;
    margin: 0 .5em;
    border-color: #000;
    border-radius: 4px;
    -moz-border-radius: 4px; /*Mozilla*/
    color: #FFF;
    font-weight: bold;
    text-decoration: none;

}
#menu a:link{
    border: px solid black;
    background: url(images/menubg2.gif) repeat-x;
}
#menu a:hover {
    background: url(images/menubginv.gif) repeat-x;
}
#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>
</head>

<body>
<div id="content">
<div id="intro">
    <div id="header">

    </div>
    <div id="menu">
        <a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a><a href="#">Page 6</a>
    </div>
</div>
<div id="mainbulk">
    <div id="textcontent">
        <p>Frotly is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that Frotly can't do, then nothing can do it, but I'd suggest to try all of Frotly's features before complaining.</p>
    </div>
    <div id="ads">
    sdjafjhdj fg dfg sdf sadf asdf asdf asdf asdf asdfa sd hgilehri hergiuesrh iofdshoiers f vpaeirg 9owaej waeoioje raoaednae dnirefn oeh råo hwog heirhg oesnr ieharg eanr poaergo neriuhg neiarginea rer gr.
    </div>
</div>
</div>
</body>
</html>


嬉戏
正文，html{
字体大小：100%；
文本对齐：居中；
填充：0；
边界：0；
保证金：0；
}
#介绍{
边界：0；
文本对齐：继承；
宽度：继承；
}
#内容{
最大宽度：50em；
边缘：0.7em；
}
#标题{
背景图片：url（images/frotly.gif）；
背景重复：无重复；
高度：6.25em；
}
#菜单{
文本对齐：左对齐；
}
#大批量{
文本对齐：左对齐；
}
#菜单a{
高度：1米；
文本转换：大写；
填充：0.15em.6em；
字号：0.9em；
边缘：0.5em；
边框颜色：#000；
边界半径：4px；
-moz边框半径：4px；/*Mozilla*/
颜色：#FFF；
字体大小：粗体；
文字装饰：无；
}
#菜单a：链接{
边框：px纯黑；
背景：url（images/menubg2.gif）repeat-x；
}
#菜单a：悬停{
背景：url（images/menubginv.gif）repeat-x；
}
#大批量{
填充物：1.5em 2%1.5em.5em；
}
#广告{
宽度：7.5em；
浮动：左；
显示：表格单元格；
填充：0.2em；
}
#文本内容{
宽度：70%；
浮动：左；
显示：表格单元格；
}
Frotly是世界上最令人惊奇的网站。它有一个非常好的设计，是完美的一切。如果有Frotly做不到的事情，那么什么也做不到，但我建议在抱怨之前尝试Frotly的所有功能
sdjafjhdj fg dfg sdf sadf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf。

设置主容器的宽度，或使用

min width

请细化原始问题以提供更多信息，或进一步澄清问题。最理想的解释是为什么目前的答案不令人满意。发布新问题（至少）有两个副作用：第一，它只会进一步增加系统的噪音；第二，也是更重要的一点，它激怒了人们，以至于他们几乎立即投票决定以完全相同的方式结束比赛。@David Thomas--这在随附的视频中都有解释。在其他人停止访问后，我将其添加到了另一个问题中。您可以编辑问题的标题并添加评论，让人们知道问题已更新。不要重新发布问题，因为人们会关闭它而不是回答它。它已经在那里了，我只是在问题中添加了一点站点。另外，我不喜欢px，更喜欢em。我认为这是因为您使用的是最大宽度，请尝试添加最小宽度

#mainbulk { width: 960px; }