Question

我正在尝试设计一个看起来像这样的布局：

我希望使用百分比而不是px来设计整个布局。我认为我相当接近，但我在边缘或其他方面遇到问题。这是我目前的代码：

CSS

html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
}

#header  {
      margin: 0;
      background-color: #000000;
      height: 5%;
      width: 100%;
}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    overflow: hidden;
    height: 95%;
    margin: 0;
}

#left {
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
}

#right {
    float: left;
    width: 75%;
    height: 100%;   
    margin-right: 0%;
    display: inline;
}

.boxes {
    margin: .5%;
    width: 48%;
    height: 48%;
}

#topleft {
    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}

HTML

<html>
    <body>      
        <div id="header">

    </div>
    <div id="wrapper">
        <div id="content">  
                <div id="left">
                </div>
                <div id="right">
                    <div class="boxes" id="topleft"></div>  
                    <div class="boxes" id="topright"></div>

                    <div class="boxes" id="bottomleft"></div>
                    <div class="boxes" id="bottomright"></div>  
                </div>
        </div>
    </div>                   
    </body>
</html>

我需要在CSS和HTML代码中添加什么来获取我正在寻找的布局？任何帮助将不胜感激。

Answer 1

我想现在这是正确的，看一看。我回来了，正确的宽度为75％，74％是错误的。但我使用css3的box-sizing: border-box来使宽度包含#left和 .box 的边框。此外，我将框宽度设置为49％，这样就完成了所需的尺寸以及 .5％的边距：

<强> CSS

    html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
    border: 1px solid;
}

#header  {
      margin: 0;
      #background-color: #000000;
      height: 5%;
      width: 100%;
      border: 1px solid;

}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    #overflow: hidden;
    height: 95%;
    margin: 0;
    padding: 0px;
}

#left {
    box-sizing: border-box;
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
    border: 1px solid;
    padding: 0px;
}

#right {

    float: left;
    width: 75%;
    height: 100%;   
    margin-right: 0px;
    display: inline;
    padding: 0px;
}

.boxes {
    box-sizing: border-box;
    margin: .5%;
    width: 49%;
    height: 49%;
    border:1px solid;
}

#topleft {

    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}

Answer 2

如果是我，我会把它变成一个网格系统，让它们嵌套。

类似的东西：

<header class="section group">
    <div class="col span_1_of_1">Header (this HTML is rather redundant)</div>
</header>
<section class="section group">
    <aside class="col span_1_of_10">Left</aside>
    <main class="col span_9_of_10">
        <section class="section group">
            <div class="col span_1_of_2">Top Left</div>
            <div class="col span_1_of_2">Top Right</div>
        </section>
        <section class="section group">
            <div class="col span_1_of_2">Top Left</div>
            <div class="col span_1_of_2">Top Right</div>
        </section>
    </main>
</section>

CSS基于百分比，包括边距的百分比。

Check it out

HTML5 CSS液体布局问题

2 个答案: