0

我只是在学习，我正在尝试将我的 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 上找到答案，但你们这里的编码人员总是有不同且独特的做事方式，这确实激发了创造性编码。谢谢您的帮助。

4

6 回答 6

1

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

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

于 2014-03-03T09:03:58.010 回答
1

您所要做的就是将您的元素包装在 a 中div，并给它您想要的页面的 with ，如下所示：

小提琴

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;
}
于 2014-03-03T09:14:53.280 回答
1

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

小提琴

此外，您可以只在元素上使用并float:left在left元素上移除。float:rightright

小提琴

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

}

于 2014-03-03T08:57:38.893 回答
0

You could try this

#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}
于 2014-03-03T09:02:57.973 回答
0

你有两件事要做：

  1. 用一个.wrap

    .wrap {width: 900px; margin: auto;}

    并将所有的 HTML 内容放在它下面。这使内容居中。

  2. 删除floats。在您的代码中，删除float: leftandfloat: right的#leftand #right。

于 2014-03-03T09:00:30.620 回答
0

要使您的“右 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>
于 2014-03-03T09:04:25.057 回答