Question

我试图找出如何获得2个div来完美划分页面。我的HTML逻辑如下。

元素的总宽度为width加上其border-size
外部div宽度为700像素，没有填充
因此，我可以通过使div成为display: inline; width: 348px; border: 1px;来完成一个完美的细分。它们将被紧挨着彼此压扁并占据外部div的整个宽度。

但由于某些原因，这不起作用。请把我的罪孽清理干净。

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>practice page</title>
        <style type="text/css">
            .main-content
            {
                border: 1px dashed black;
                padding: 0px;
                width: 700px;
            }
            .left-side
            {
                border: 1px dashed blue;
                margin: 0px;
                float: left;
                width: 348px;
                height: 900px;
                display: inline;
            }
            .right-side
            {
                border: 1px dashed red;
                margin: 0px;
                float: right;
                width: 348px;
                height: 900px;
                display: inline;
            }
        </style>
    </head>  
    <body>
        <div class="main-content">
            <div class="left-side">
                <p>Here's the left side.</p>
            </div>
            <div class="right-side">
                <p>And here's the right side</p>
            </div>
        </div>       
    </body>  
</html>

Answer 1

如果您使用width: 50%;，还可以将两个内部div设置为box-sizing: border-box;。然后你不必考虑边界大小，它是一个更灵活的结构。

使用精确的像素，获得2个div可以完美地将页面分成1/2

1 个答案: