CSS：定位 div

发布于 2024-10-08 20:28:06 字数 454 浏览 3 评论 0原文

我怎样才能让我的 div 布局如下图所示。

--------------  -------------------
|            |  |      Div2       |
|            |  -------------------
|   Div1     |  -------------------
|            |  |      Div3       |
|            |  -------------------
|            |  -------------------
|            |  |      Div4       |
--------------  -------------------

我尝试过的所有 div 的 2,3,4 彼此水平排列。我试着做清楚：左；（或两者）但它们只是最终位于 div 1 下。感谢您的帮助！

原文

how can I get my divs to layout out like the below pic.

--------------  -------------------
|            |  |      Div2       |
|            |  -------------------
|   Div1     |  -------------------
|            |  |      Div3       |
|            |  -------------------
|            |  -------------------
|            |  |      Div4       |
--------------  -------------------

Everything I've tried has div's 2,3,4 lining up horizontally to each other. I tried to do clear: left; (or both) but they just end up under div 1. Thanks for the help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满天都是小星星 2024-10-15 20:28:06

我很可能在右侧有一个容器 div，其中嵌套了三行。

回复收藏 0 原文

风向决定发型 2024-10-15 20:28:06

许多可能的解决方案之一：

<html>
  <head>
    <style type="text/css">
      #div1, #div2, #div3, #div4 {
        border: 1px dashed #000;
        width: 300px;
      }
      #div1 {
        float: left;
      }
      #div2, #div3, #div4 {
        margin-left : 300px;
      }
    </style>
   </head>
   <body>
     <div id="div1">Div 1</div>
     <div id="div2">Div 2</div>
     <div id="div3">Div 3</div>
     <div id="div4">Div 4</div>
   </body>
 </html>

边框只是为了帮助查看 div。

One of many possible solutions:

<html>
  <head>
    <style type="text/css">
      #div1, #div2, #div3, #div4 {
        border: 1px dashed #000;
        width: 300px;
      }
      #div1 {
        float: left;
      }
      #div2, #div3, #div4 {
        margin-left : 300px;
      }
    </style>
   </head>
   <body>
     <div id="div1">Div 1</div>
     <div id="div2">Div 2</div>
     <div id="div3">Div 3</div>
     <div id="div4">Div 4</div>
   </body>
 </html>

The border is there just to aid in seeing the divs.

回复收藏 0 原文

剑心龙吟 2024-10-15 20:28:06

像这样的东西会起作用，基本上，该方法是将元素简单地放置在您需要的位置，IMO，这是理解页面基本布局的简单方法。在这里您可以看到一个示例http://jsbin.com/izosi3/edit

<div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:150px;">
</div>
<div id="header" style="position:absolute; top:0px; left:150px; height:50px; right:0px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:150px; bottom:0px; right:0px;">
</div>

Something like this will work, basicaly the approach is to simply position the elements where you need them, IMO this is an easy way to understand the base layout of your page. here you can see an example http://jsbin.com/izosi3/edit

<div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:150px;">
</div>
<div id="header" style="position:absolute; top:0px; left:150px; height:50px; right:0px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:150px; bottom:0px; right:0px;">
</div>

回复收藏 0 原文

童话 2024-10-15 20:28:06

演示怎么样

Html

<div class="container">
    <div class="big">biggy</div>
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
</div>

Css

.container{
    width:400px;
    overflow:hidden;
    border:1px solid #ccc;
    padding:10px 0px 0px 10px;
}
.big{
    width:160px;
    height:100px;
    float:left;
    background-color:#c55;
    padding:5px;
}
.small{
    width:180px;
    height:20px;
    float:left;
    background-color:#5c5;
    margin-bottom:10px;
    margin-left:15px;
    padding:5px;
}

：http://www.jsfiddle.net/gaby/em7yz/2/

How is that

Html

<div class="container">
    <div class="big">biggy</div>
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
</div>

Css

.container{
    width:400px;
    overflow:hidden;
    border:1px solid #ccc;
    padding:10px 0px 0px 10px;
}
.big{
    width:160px;
    height:100px;
    float:left;
    background-color:#c55;
    padding:5px;
}
.small{
    width:180px;
    height:20px;
    float:left;
    background-color:#5c5;
    margin-bottom:10px;
    margin-left:15px;
    padding:5px;
}

demo: http://www.jsfiddle.net/gaby/em7yz/2/

回复收藏 0 原文

梦幻的味道 2024-10-15 20:28:06

你可以做这样的事情。但是您必须明确设置 DIV 的高度。

<div style="width:600px;height:600px;border:1px solid red;">
   <div style="float:left;width:300px;height:600px;border:1px solid green;">
      <h1>Div 1</h1>
   </div>
   <div style="float:left;">
      <div style="height:200px;width:298px;border:1px solid orange;"><h1>Div 2</h1></div>
      <div style="height:200px;width:298px;border:1px solid blue;"><h1>Div 3</h1></div>
      <div style="height:200px;width:298px;border:1px solid purple;"><h1>Div 4</h1></div>
   </div>
   <div style="clear:both;"></div>
</div>

You could do something like this. But you'll have to explicitly set the height of your DIV's.

<div style="width:600px;height:600px;border:1px solid red;">
   <div style="float:left;width:300px;height:600px;border:1px solid green;">
      <h1>Div 1</h1>
   </div>
   <div style="float:left;">
      <div style="height:200px;width:298px;border:1px solid orange;"><h1>Div 2</h1></div>
      <div style="height:200px;width:298px;border:1px solid blue;"><h1>Div 3</h1></div>
      <div style="height:200px;width:298px;border:1px solid purple;"><h1>Div 4</h1></div>
   </div>
   <div style="clear:both;"></div>
</div>

回复收藏 0 原文

~没有更多了~