Question

我以为我已经找到了CSS浮动，但显然我不知道因为我无法弄清楚为什么这个页面的行为方式如此。我希望照片和状态div占据屏幕的50％，这样它们就会出现在同一条线上，并且该线占据屏幕的100％。但正在发生的事情是＆＃34;统计＆＃34; div渲染在＆＃34;照片＆＃34; DIV。我可以让他们在同一条线上渲染的唯一方法是将它们各自的宽度减少到49％（或更低），但是在＃34; Stats＆＃34;的右边缘之间存在微小的差距。和屏幕的边缘。有些东西占用了额外的空间，但我不知道它是什么，我在Chrome的Dev Tools中看不到任何东西。顺便说一下，reset.css只是Meyer的重置。

感谢。

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../reset.css" />
    <link rel="stylesheet" href="base.css" />
</head>
<body>
    <div class="content-main">
        <div class="photos">Photos</div>
        <div class="stats">Stats</div>
    </div>
</body>
</html>

base.css

.content-main {
    width: 100%;
}

.photos {
    float: left;
    width: 50%;
    background: #cf6;
}

.stats {
    float: left;
    width: 50%;
    background: #bbb;
}

Answer 1

我发现了我的错误。如果为每个元素添加额外的填充，则会产生问题。我离开了我的问题，以便上面显示的代码可以工作。我的坏。

为什么浮动元素不会占据整个屏幕宽度？

1 个答案: