CSS - 创建两列

Question

我的学校项目有问题。我想使用css在我的页面上创建两列，但没有任何工作......

网站：http://kitlab.pef.czu.cz/~wbdinfo141528/ CSS：http://kitlab.pef.czu.cz/~wbdinfo141528/css/style.css

我希望有一些愚蠢的错误，但我无法弄清楚问题出在哪里。

我想在右侧列旁边放置一列：

Answer 1

你的保证金占据了整个行，​​这就是第二个div被推倒的原因。您不需要保证金，只需设置宽度并将其显示为内联块。 inline-block意味着它仍然是一个块，但会像文本一样包裹 - 所以如果第二个div有足够的空间与第一个div在同一行，它就可以。

用此替换CSS，对已更改的内容发表评论。

div.leva {
    background: blueviolet;
    /* float: left; */
    /* margin: 5px 500px auto auto; */
    width: 49%;
    display: inline-block;
}

div.prava {
    background: yellow;
    /* float: left; */
    /* margin: 5px auto auto 500px; */
    display: inline-block;
    width: 49%;
}

或者，您可以使用相对容器div并将其设置为100％，并在容器内部有两个绝对div，宽度为50％。

<强> HTML

<div class="container">
    <div class="leftdiv"></div>
    <div class="rightdiv"></div>
</div>

<强> CSS

.container {
    position: relative;
    width: 100%;
}

.leftdiv, .rightdiv {
    position: absolute;
    width: 50%;
    top: 0;
}

.leftdiv {
    left: 0;
}

.rightdiv {
    right: 0;
}

Answer 2

您必须在div leva et prava http://jsfiddle.net/rvp5js2w/

中添加margin:0

Answer 3

乍一看你的花车不正确。

紫色向右漂浮，而黄色漂浮在左边。

为每个div设置宽度（宽度小于stranka的总宽度/ 2），然后正确浮动它们，它应该排成一行。