我正在尝试布置我的第一个网站，但我一直坚持将两个 div 放在同一行中。我在下面张贴了一张图片，显示了我要实现的布局。
这是我目前拥有的 2 个 div 的代码。
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
我研究 CSS 已经有一段时间了，但似乎做不好。
我想要做的是将以上所有内容都放在一行中，导航在下面的行中。希望这是有道理的。我没有使用像 bootstrap 这样的任何框架，所以只使用我自己的类等。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
最佳答案
您需要为您的 div 创建更多的容器。这是一个非常基本的例子来解释:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
容器类将占据页面的整个宽度并包含导航栏上方的所有内容。 Div one 将是您的 Logo ，而 div 2 将是另一个容器，您可以在其中放置更多 div(三个和四个)，这些 div 占据 div 2 高度的一定百分比。在这些 div 之一的内部，您需要将您的社交 Logo 和地址放在下一个中，以便它显示在下面。这是 CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
这只是一个非常基本的示例，仅用作您想法的概念。明显去除俗气的背景色并修改
关于html - 在同一行中放置 2 个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39416651/