Question

我有3个div包含顶部导航，侧面导航和主要内容的元素（在源代码中以该顺序出现）。如何将主要内容放在侧面导航的右侧？

div .header {
  display: inline-block;
}

div .logo {
  float: left;
  margin-right: 210px;
}

#search-text {
  float: left;
  width: 550px;
  margin-right: 50px;
}

div .top-right-nav {
  float: left;
}

div .side-nav {
  float: left;
  display: inline;
  width: 300px;
}

div .user-pic img {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  border-radius: 6px;
  align: left;
}

div .user-content {
  width: 200px;
  height: 200px;
  margin-bottom: 5px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  list-style-type: none;
}

div .user-content ul {
  list-style-type: none;
}

div .trending {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  list-style-type: none;
}

div .trending ul {
  list-style-type: none;
}

.main-content {
  float: left;
}

<div class="header">
  <div class="logo" class="header">
    <a href="#"><img src="#" alt="Logo" /></a>
  </div>
  <div class="search-bar" class="header">
    <form action="#" method="get">
      <input type="text" name="search_text" id="search-text" placeholder="Search" />
    </form>
  </div>
  <div class="top-right-nav" class="header">
    <a href="#">Home</a>
    <a href="#">Notification</a>
    <a href="#">Profile and settings</a>
  </div>
</div>

<div class="side-nav">
  <div class="user-pic">
    <br />
    <br />
    <br />
    <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
  </div>
  <div class="user-content">
    <ul>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Photos</a></li>
    </ul>
  </div>
  <div class="trending">
    <ul>
      <li><a href="#">eggs</a></li>
      <li><a href="#">turkey</a></li>
    </ul>
  </div>
</div>

<div class="main-content">
  <div class="cover-pic">
    <img src="http://www.hdfbcover.com/randomcovers/covers/never-stop-dreaming-quote-fb-cover.jpg">
  </div>
</div>

我想将“永不停止梦想”的图像和所有后续元素（未出现在此代码中）放在侧面导航的右侧。

Answer 1

尝试这个，我将side-nav和主要内容包装在div中，然后在包装器之前添加了一个带有clear:both的div，并稍微调整了样式：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .header {
        }

.logo {
  float: left;
  margin-right: 210px;
}

#search-text {
  float: left;
  width: 550px;
  margin-right: 50px;
}

.top-right-nav {
  float: left;
}

.side-nav {
  float: left;
  width: 300px;
  background-color: red;
}

.user-pic img {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  border-radius: 6px;
  align: left;
}

.user-content {
  width: 200px;
  height: 200px;
  margin-bottom: 5px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  list-style-type: none;
}

.user-content ul {
  list-style-type: none;
}

.trending {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(31, 127, 92, 0.2);
  list-style-type: none;
}

.trending ul {
  list-style-type: none;
}

.main-content {
  float: left;
}
    </style>
</head>
<body>
    <div class="header">
        <div class="logo" class="header">
            <a href="#"><img src="#" alt="Logo" /></a>
        </div>
        <div class="search-bar" class="header">
            <form action="#" method="get">
                <input type="text" name="search_text" id="search-text" placeholder="Search" />
            </form>
        </div>
        <div class="top-right-nav" class="header">
            <a href="#">Home</a>
            <a href="#">Notification</a>
            <a href="#">Profile and settings</a>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div>
        <div class="side-nav">
            <div class="user-pic">
                <br />
                <br />
                <br />
                <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
            </div>
            <div class="user-content">
                <ul>
                    <li><a href="#">Videos</a></li>
                    <li><a href="#">Photos</a></li>
                </ul>
            </div>
            <div class="trending">
                <ul>
                    <li><a href="#">eggs</a></li>
                    <li><a href="#">turkey</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
                <div class="cover-pic">
                    <img src="http://www.hdfbcover.com/randomcovers/covers/never-stop-dreaming-quote-fb-cover.jpg">
                </div>
            </div>
    </div>

</body>
</html>

如何将一个div（主要内容）的元素移动到另一个div（侧面导航栏）的右侧？

1 个答案: