Question

所以我有一个div的主要文章内容，宽度为600px，我想在侧面有这些链接，我想它会在同一个div但我似乎无法得到正确的效果，需要一些帮助。

非常感谢。

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
  <!-- viewport meta to reset iPhone inital scale -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>title</title>

</head>

<body>

  <div id="pagewrap">
    <div id="logos">
      <img id="logo" src="img/logo.png">
      <h1 id="name">Company Name</h1>
        <img class="socialmedia" src="img/facebook.png">
        <img class="socialmedia" src="img/twitter.png">  
        <img class="socialmedia" src="img/googleplus.png">    
      </div>
      <div id="header">
        <div id="menu-outer">
          <div class="table">
            <ul id="horizontal-list">
              <li><a href="#">Home</a></li>
              <li><a href="#">eBooks</a></li>
              <li><a href="#">Magazines</a></li>
              <li><a href="#">Movies</a></li>
              <li><a href="#">Help</a></li>
              <li><a href="#">Login</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div id="content">
        <h2>Lorem Ipsum Dolor Sit</h2>
        <p id="article-information">posted on 15 May 2015 by <a href="#">Author</a></p>
        <img id="main-article-image" src="img/placeholder.png">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
          fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
          sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
          imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
          justo. Donec interdum vestibulum libero. Nam laoreet dui sed
          magna. Nam consectetuer mollis dolor. Aenean ligula.
          liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
        <div id="more-links-list">
          <p>list</p>
          <p>items</p>
          <p>lol</p>
        </div>
      </div>
      <div id="sidebar">
      <h3>A guide to snoopsetting</h3>
      <img class="aside-images" src="img/placeholder.png">
      <h3>Welcome to the Surveillance State</h3>
      <img class="aside-images" src="img/placeholder.png">
      </div>

      <div id="footer">
      </div>
    </div>
  </bo

DY＆GT;

CSS

body {
  font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
  color: #669;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#logo {
  width: 20%;
  height: auto;
  position: relative;
  right: 25px;
  top: 50px;
}

#name {
  position: relative;
  bottom: 60px;
  left: 170px;
  font-style: italic;
  font-size: 55px;
  height: 30px;
}

.socialmedia {
  position: relative;
  width: 8%;
  bottom: 155px;
  height: auto;
  float: right;
}

#main-article-image {
  width: 600px;
  height: 450px;
}

.aside-images {
  width: 340px;
  height: 255px;
}

#more-links-list {
  display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
  padding: 5px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}
#logos  {
  height: 160px;
}
#header {
  height: 50px;
}
#content {
  position: relative;
  width: 600px;
  float: left;
  text-align: justify;
}
#more-links-list {
  float:right;
  padding: 10px;
  margin-left:10px;
  margin-bottom:10px;
  background:#ddd;
}
#sidebar {
  width: 340px;
  float: right;
  position: relative;
  bottom: 34px;
}
#footer {
  clear: both;
  width: auto;
  height: 100px;
}

#article-information {
  margin: 0px;
}
h2 {
  margin: 0px;
  padding-top: 56px;
}

h3 {
  margin: 0px;
  padding-top: 38px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  width: 16.65%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

  #pagewrap {
    width: 94%;
  }
  #content {
    width: 65%;
  }
  #sidebar {
    width: 30%;
  }

}

/* for 700px or less */
@media screen and (max-width: 700px) {

  #content {
    width: auto;
    float: none;
  }
  #sidebar {
    width: auto;
    float: none;
  }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

  #header {
    height: auto;
  }
  h1 {
    font-size: 24px;
  }
  #sidebar {
    display: none;
  }

}

/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
  margin-bottom: 5px;
}

#footer {
  background-color: #eee;
  border-style: solid;
  border-width: 1px;
}

Answer 1

你可以通过在包含你的内容的div（文章文本）中放置一个float:right;样式的div来实现这一点，我为你创建了这个例子：

https://jsfiddle.net/davoscript/tjf56jLw/4/

<p>
    <!-- The floating box -->
    <div id="more-links-list" style="float:right;">
      <p>list</p>
      <p>items</p>
      <p>lol</p>
    </div>
    <!-- The article content -->
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>

如果有效，请告诉我。

Answer 2

您应该将链接放入<aside>。这可能会低于div中文本的代码，然后使用浮动或定位进行样式设置。这将是一个让你的样式允许文本包装在链接下的问题。

如何用css（图像）实现这种效果

2 个答案: