你如何解决这个问题关于对齐div对方？

可能重复：
Aligning divs next to each other?你如何解决这个问题关于对齐div对方？

我想这样的设计：

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

我该如何解决这个问题？我已经尝试过像左边&这样的东西，但是我不能让它们在同一条线上。

我希望div 2始终在那里，而div1的最大宽度为40em，但调整大小以允许div 2在任何时候显示，如果必要的话。

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

我遇到这样的问题：

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

完整的源代码：

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

来源

2010-12-21 DarkLightA

请精炼您原来的问题提供更多的信息，或进一步明确的问题。理想地解释为什么当前答案不令人满意。发布新问题至少有两个副作用：第一，它只是给系统增加了更多的噪音;其次，更重要的是，它激怒了人们，他们几乎立即投票结束为一个确切的副本。 – 2010-12-21 12:12:48

@大卫托马斯---这些都在附带的视频中解释过。 http://www.screencast-o-matic.com/watch/c6lrXsXyQ我在人们停止访问之后向其他问题添加了这一点。 – DarkLightA 2010-12-21 12:15:55

你可以编辑你的问题的标题，并添加评论，让人们知道它的更新。不要重复发布问题，因为人们会关闭它而不是回答问题。 – Kyle 2010-12-21 12:21:18

#mainbulk { width: 960px; }

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

来源

2010-12-21 12:12:09 ITg

它已经在那里了，我只是在这个问题上添加了一些网站。我也不喜欢px，更喜欢em。 – DarkLightA 2010-12-21 12:14:02

我认为它是因为你正在使用最大宽度，所以也尝试添加最小宽度 – ITg 2010-12-21 12:15:34

你如何解决这个问题关于对齐div对方？

回答

相关问题