Question

可能重复：
Aligning divs next to each other?

我想要这个设计：

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>

Answer 1

#mainbulk { width: 960px; }

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

如何解决有关将divs彼此对齐的问题？

1 个答案: