文章/答案/技术大牛

发布

社区首页 >问答首页 >在页面内容旁边放置列的最佳方法是什么？

问在页面内容旁边放置列的最佳方法是什么？
EN

Stack Overflow用户

提问于 2016-01-09 05:38:29

回答 1查看 36关注 0票数 1

这是我目前所拥有的，http://codepen.io/anon/pen/XXRYXY

将绿色框(它们代表广告)放置在页面内容的右侧的最佳方法是什么？在下面的代码中，我尝试使用宽度:50%。

在写代码之前，我应该先规划一下我的内容的宽度和广告的宽度吗？我对人们如何计划创建他们的网页感到困惑，因为我的屏幕宽度是192‘m，如果我用这个宽度作为模型，屏幕小的用户会以不同的方式查看我的网页。在规划元素的测量和定位时，我应该使用哪些维度？

<body>
<div id="wrap">
 <div id="head">
  <div id="header" style="float:left;">
    <p id="title">
      <a href="#">Blog Title</a>
    </p>
    <p id="description">Blog Description</p>
  </div>

  <div id="navbar" style="float:right;">
    <ul style="list-style-type:none;">
      <li><a href="#">Start Here</a></li>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>

<div id="welcome-wrap" style="clear:both;">
  <div id="first-time">
    <h2>First time here?</h2>
    <p style="margin:0;">Fusce ut finibus purus, quis convallis orci. Donec a est eget tellus euismod tincidunt non eu urna. Sed id gravida dui. Phasellus sed faucibus nisl. Proin blandit nisl eu lectus convallis.</p>
    <br>
    <br> If it's your first time here,
    <a href="#">read this</a>
  </div>

  <div id="topics">
    <h2>TOPICS</h2>
    <p><a href="#"><strong>Link Topic 1</strong></a>
      <p><a href="#"><strong>Link Topic 2</strong></a>
        <p><a href="#"><strong>Link Topic 3</strong></a>
  </div>
</div>

<div id="inner" style="clear:both;">
  <div id="content">
    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Mauris gravida diam id sem blandit, vitae vestibulum nunc interdum. Nulla congue felis eget tincidunt rhoncus. Nunc rutrum, massa a venenatis fermentum, nisi leo dictum sapien, ut venenatis quam neque sit amet quam. Nunc efficitur hendrerit
        hendrerit. Sed sit amet tortor ex. Pellentesque dapibus porttitor massa eu iaculis. Curabitur varius vulputate sagittis. Aenean ac mauris eu justo lobortis accumsan a vitae est. Praesent imperdiet quam vitae porta lacinia.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>

    <div style="clear:both;"></div>

    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Nulla porttitor rhoncus justo in molestie. Aliquam sed vehicula mauris, quis egestas augue. In hac habitasse platea dictumst. Donec congue arcu mollis aliquet aliquam. Pellentesque purus dolor, commodo eget tincidunt nec, fringilla quis magna.
        Nam suscipit cursus purus, in sodales tortor egestas suscipit. Proin ut augue sit amet nulla laoreet maximus id eu nibh. Pellentesque dapibus finibus egestas.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>

    <div style="clear:both;"></div>

    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Fusce ut finibus purus, quis convallis orci. Donec a est eget tellus euismod tincidunt non eu urna. Sed id gravida dui. Phasellus sed faucibus nisl. Proin blandit nisl eu lectus convallis, vel ultricies risus varius. Morbi id nibh enim. Suspendisse
        potenti. Nulla facilisi. Quisque congue lacinia dapibus.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>
  </div>

  <div id="sidebar" style="float:right;">
    <div>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKAg"></a>
      </p>
    </div>
  </div>

CSS：

    body{
    padding:0;
    margin:0;
}

#wrap{
    margin-left:500px;
    margin-right:500px;
    max-height:5000px;
}

/*head*/

#head{
    min-height:135px;
    width:960px;
    margin-top:50px;
}

#title a{
    font-size:2em;
    text-decoration:none;
    color:black;
}

#description{
    font-size:0.9em;
}

#header p{
    margin:0 !important;
}

#navbar ul li{
    float:left;
    padding-left:1.5em;
    margin-left:0;
}

#navbar ul li a{
    color:black;
    text-decoration:none;
    font-size:1.2em;
    margin-left;0;
}

/*sub head*/
#welcome-wrap{
    width:100%;
    height:500px;
}

#first-time{
    float:left;
    width:450px;
    padding-right:150px;
}

#topics{
    float:left;
    text-align:center;
    background-color:green;
    width:300px;
    height:280px;
}
/*content*/

#inner{
    width:50%;
    float:left;
}

#sidebar{
    float:right;
    width:50%;
}

.post a{
    float:left;
}

css-position

html

css

css-float

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-09 06:38:01

好的，在将代码放入IDE(Notepad++)之后，我已经解决了您的问题。

首先，您必须关闭您的主要div #包装。

第二，物业价值保证金-右:这是完全没有必要的#包装，因为它没有任何视觉目的，也阻止您(广告)被浮动到您的页面的右侧。

如果你想将侧边栏向上或向下移动，只需分别添加到它们的边距、顶部或边距底部。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34690095

复制

相似问题

问在页面内容旁边放置列的最佳方法是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面内容旁边放置列的最佳方法是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面内容旁边放置列的最佳方法是什么？
EN