Question

我正在尝试布局我的第一个网站，而我却坚持在同一行中定位两个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;
}

Answer 1

您需要为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一个是你的标志，而div就是另一个容器，你可以放置更多的div（三个和四个）占据div二的高度的百分比。在其中一个div中，你需要把你的社交徽标和地址放在下一个div中，以便显示在下面。这是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;
}

这只是一个非常基本的例子，仅用作您想法的概念。显然删除俗气的背景颜色并修改

Answer 2

更新：

我创建了一个带有.top类的div，它具有已定义的宽度，允许您使用margin:auto;将其中的任何内容居中。我创建了一个围绕您的社交图标的部分并将其浮动。这是一个比我之前更好的例子，因为这里的徽标是居中的。

我希望这会有所帮助：https://jsfiddle.net/0sptpx0j/3/

Answer 3

大家好，感谢您的所有建议，我在阅读了绝对定位后决定沿着这条路走下去。这就是我想出来的。

<div class="full-width">
  <div class="logo">
    <img src="img/logo.png"/>
  </div>
  <div class="social">
    <div class="social-list">
      <ul class="icons">
        <li><img src="img/facebookSS.png"/></li>
        <li><img src="img/twitterSS.png"/></li>
        <li><img src="img/instagramSS.png"/></li>
      </ul>
    </div>
    <div class="address">
      <p>Address goes in here</p>
    </div>
  </div>
</div>


.logo {
  width: 300px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo img{
  width: 100%;
  height: auto;
}

.social {
  float: right;
  width: 300px;

}

.social-list {
  width: 100%;
}

.icons {
  list-style: none;
  padding: 0;
}

.icons li {
  display: inline-block;
  margin-right: 10px;

}
.icons img {
  width: 50px;
  height: auto;
}

.full-width {
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

位置2 div在同一行

3 个答案: