Question

我正在学习，我正在尝试将我的4 div布局设置为我想要的页面大小（不是用户窗口打开的大小）。基本问题，但是我无法将我的右侧div添加到左侧div而不一定是用户窗口的右侧。

这是我的代码，并提前感谢你。

HTML：

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 02, 2014
            <br><br>Hello.
            <br>
         </p>
      </div>
      <div id="left"> </div>
      </div>
      <div id="right">    </div>
      <div id="footer">
         </a>
      </div>
   </body>
</html>

CSS：

p
{
    font:10px verdana,sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body
{
    background-color: red;
}

div {
    border-radius: 0px;
}

#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}

#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}


#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

我知道这是一个基本问题，我可能会在谷歌上找到答案，但是你在这里的编码员总是有不同的，独特的做事方式，真正激发创意编码。谢谢你的帮助。

Answer 1

删除左右元素上的float:left和float:right。使用display: inline-block

Fiddle

此外，您只需在float:left元素上使用left，然后移除float:right元素上的right。

Fiddle

#left {
   display: inline-block;
   height: 385px;
   width: 122px;
   background-color: black;
   //float: left;
   margin-right: 5px;
   margin-bottom: 5px;

}

#right {
   display: inline-block;    
   height: 385px;
   width: 300px;
   background-color: black;
   //float: right;
   margin-right: 5px;
   margin-bottom: 5px;

}

Answer 2

我建议您在float: left和.left上使用.right。这将右侧div放在左侧div旁边。

http://jsfiddle.net/AB2VE/1/

Answer 3

所有哟所要做的就是将你的元素包裹在div中，并按照你想要的页面给它：

<强> FIDDLE

HTML：

<div id="wrap">
    <div id="header">
        <p>March 02, 2014
            <br/>
            <br/>Hello.
            <br/>
        </p>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="footer"></div>
</div>

CSS：

#wrap {
    width:600px;
}
p {
    font:10px verdana, sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
body {
    background-color: red;
}
div {
    border-radius: 0px;
}
#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}
#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}
#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}
#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

Answer 4

你有两件事要做：

使用.wrap
```
.wrap {width: 900px; margin: auto;}
```
并将所有HTML内容放在其下。这是内容的中心。
删除float。在您的代码中，删除float: left和float: right的{{1}}和#left。

Answer 5

您可以尝试this

#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

Answer 6

让'right div'（div＃right）附加到你的'left div'（div＃left），只需将div＃right放在div＃left里面，让它成为一个孩子。并将其相对于它的父容器定位..这需要div＃left将位置样式设置为relative。

你的css应该如下;

CSS

div#left {
height: 385px;
width: 122px;
background-color: black;
display:block;
position:relative;
}

div#right {
height: 385px;
width: 300px;
background-color: black;
position: absolute;
left:100%;
top:0;
display:block;
}

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 2<sup>nd</sup>, 2014
            <br /><br />Hello.
            <br />
         </p>
      </div>
      <div id="left">
        <div id="right"></div>
      </div>
      <div id="footer">
      </div>
   </body>
</html>

右对齐div（不是右边的屏幕边缘）

6 个答案:

CSS

HTML