Question

我有问题。我制作了网站布局（下图中的图片。几乎一切都很好，但有一个问题：它是一个块文章：当文本很多时，按钮很好，但是当小文本时，按钮向上移动...... 如何正常定位，并且它不会影响水平线上的其他内容？我的代码：HTML：

<article id = 'article'>
<section><!--first section-->
     <h1>This is header of theme1</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>
<section><!-- [n-1] section-->
     <h1>This is header of theme2</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>

CSS：

article
{
display:block;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
max-width:75% !important;
margin-left: 25px;
margin-top:0;
padding-left:5px;
padding-top:5px;
overflow:hidden;
}

article section
{
display:inline-block;
width:100%;
margin-bottom:50px;
}

article img
{
width:350px !important;
    height:350px !important;
}

article .leftText
{
float:left;
margin-right:5px;
margin-bottom:5px;
}

article section .button
{
background-color: red !important;
color: yellow !important;
}

布局： http://i.piccy.info/i9/ef5f5f405a91b18a55c34624ca90b0e7/1417550241/11708/837273/Bezymiannyi.png

这是问题： http://i.piccy.info/i9/bf5a07a3bcc684a91e2ef81c224f55c7/1417550761/462126/837273/Bezymiannyi2.png

Answer 1

我认为这会解决您的问题：

hr {
    clear: both;
    float: none;
}

按布局在页面上定位元素

1 个答案: