在页面内容旁边放置一列的最佳方式是什么？

这里是我到目前为止， http://codepen.io/anon/pen/XXRYXY 在页面内容旁边放置一列的最佳方式是什么？

什么是绿框（它们所代表的广告）定位到页面内容的右侧的最佳方式？在下面的代码中，我尝试使用宽度：50％。

在编写任何代码之前，我应该计划出我的内容宽度和广告宽度吗？我很困惑人们如何规划他们网页的创建，因为我的屏幕宽度是1920像素，如果我使用这个宽度作为模型，屏幕较小的用户会以不同的方式查看我的网页。在规划我的元素的测量和定位时，应该使用什么尺寸？

<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; 
}

来源

2016-01-09 Calisto

好了，把你的代码，我已经想通了你的问题的IDE（记事本+ +）之后。

首先你必须关闭你的主div #wrap。

第二次关闭财产价值保证金权利：给予#wrap的是完全没有必要的，因为它没有达到任何视觉目的，同时也阻止您的广告漂浮在您的右侧页。

如果您想要将边栏向上或向下移动，只需分别将其添加到页边距或页边距底部即可。

来源

2016-01-09 06:38:01 HTMLNoob

没问题Calisto :) – HTMLNoob

在页面内容旁边放置一列的最佳方式是什么？

回答

相关问题