gpt4 book ai didi

html - 容器内的 CSS 定位框

转载 作者:太空宇宙 更新时间:2023-11-03 23:38:19 25 4
gpt4 key购买 nike

如何使我的内容容器在右侧具有与侧边栏相同的填充,并在侧边栏旁边放置几个像素,其顶部与侧边栏处于同一水平?

http://jsfiddle.net/liondancer/Pvr73/2/

这让我感到困惑,因为我不知道我可以使用的所有属性。

我的 html:

{% 加载静态文件 %}

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div class="container">
<div class="home-button">
</div>
<div class="sidebar">
</div>
<div class="content-container">
{% block content %}

{% endblock %}
</div>

</div>
</body>
</html>

最佳答案

您需要使用 float:left 和 float:right 将它们对齐在同一水平面上。

.sidebar {
background-color: #CCFF99;
height: 100%;
width: 100px;
margin-top: 20px;
float:left;
}


.content-container {
background-color: #E6D1E6;
width: 350px;
height: 100%;
margin-right: 4%;
margin-top: 20px;
float:right;
}

检查这个 jsFiddle 是否有更改的代码

http://jsfiddle.net/Pvr73/5/

谢谢

关于html - 容器内的 CSS 定位框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23488128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com