Question

我的网页中心有一个主容器div。这已经到位，其中包含各种元素。

然而，现在我正在尝试在左侧放置一个大型内容div（Div＃1），占据主容器Div的70％左右。我正在做的很困难的事情就是让CSS的＃1，＃2，＃3和＃4排列如下图所示：

alt text

在这种情况下，我应该怎么做有关Div＃1 - ＃4的CSS？我应该将Div＃1向左浮动，并将其设置为百分比/固定宽度？并且浮动div＃2 - 4对吗？

对此的一些指导将不胜感激！

Answer 1

我会说2个包装div“left”和“right”左侧浮动，尺寸正确。

将div 1放在左边

将div 2,3和4放在右边。

这应该有用，如果不让我知道

Answer 2

以下是一个可以帮助您的工作示例：

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0; 
      }
      .content{
        padding:10px;
        margin-top:50px;
        width:770px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
      }
      .content h1{
        text-align:center; 
      }

      .content h2{
        text-align:center; 
      }

      .content .left{
        width:600px;
        float:left; 
        border:1px solid black;      
      }

      .content .right{
        width:150px;
        float:right;
      }

      .content .right div{        
        margin-bottom:10px; 

        border:1px solid black;
      }
      .content .clear{
        clear:both; 
      }
    </style>
  <body>
    <div class="content">
      <h1>Main Container Div</h1>
      <div class="left">
        <h2>Div #1</h2>
      </div>
      <div class="right"> 
        <div><p>Div #2</p></div>
        <div><p>Div #3</p></div>
        <div><p>Div #4</p></div>
        <div><p>Div #5</p></div>
      </div>
      <div class="clear">&nbsp;</div>
    </div>
    </body>
</html>

如何按以下排列布置一些div？

2 个答案: