将 div 向右对齐（不向右屏幕边缘）答案

【问题标题】：align div right (not to right screen edge)将 div 向右对齐（不向右屏幕边缘）
【发布时间】：2014-03-03 17:14:53
【问题描述】：

我只是在学习，我正在尝试将 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;
}

我知道这是一个基本问题，我可能会在 Google 上找到答案，但你们这里的编码人员总是有不同且独特的做事方式，这确实激发了创造性编码。感谢您的帮助。

【问题讨论】：

将元素包裹在一个固定的width容器元素中
无法理解您的问题。能说清楚一点吗？

标签： css html css-float right-align

【解决方案1】：

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

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

【讨论】：

这是实现我目标的最简单的答案。谢谢。

【解决方案2】：

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

Fiddle

此外，您可以只在 left 元素上使用 float:left 并在 right 元素上删除 float: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;

}

【讨论】：

这个不会回答，他用的是float，你的回答应该用float，你可以把这个作为替代发帖
@Mr.Alien 谢谢，我已将答案更新为仅使用 float:left。

【解决方案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;
}

【讨论】：

我喜欢这个，也会用这个。如果他们允许我给两个，我也会给你一个绿色的复选标记。谢谢。
@user254005 很高兴我能帮上忙，如果它对你有帮助，你可以随时投票（点击答案左上角的向上箭头）

【解决方案4】：

你有两件事要做：

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

【讨论】：

【解决方案5】：

你可以试试this

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

【讨论】：

【解决方案6】：

要使您的“右 div”（div#right）附加到您的“左 div”（div#left），只需将 div#right 放入 div#left 中，使其成为一个子元素。并将其相对于其父容器定位.. 这需要 div#left 将位置样式设置为相对。

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

【讨论】：

您可以根据需要将 float:left 添加到 div#left，但我在示例上下文中看不到重点。当您浮动对象时，您需要有一个包装器 div，其 css 声明为 'clear:both'.. 设置溢出声明也是一个好主意。在旧版浏览器上可能会出现某些显示问题......甚至是一些现代浏览器。