CSS - 定位水平线

我试图在我正在构建的网站的部分上放置水平线，并且无法将它放在正确的位置。这是它应该如何看一个Photoshop版本 - CSS - 定位水平线

这是我的编码版本 -

我使用小时标签，因为这似乎是最简单的方法来创建它 - 这里的代码 -

hr { 
 

 
    display: block; 
 
    width: 250px; 
 
    margin-top: 0.5em; 
 
    margin-bottom: 0.5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-style: inset; 
 
    border-width: 1px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/> 
 

 
<section id="welcome"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="twelve columns"> 
 
       <h4>WELCOME TO FEATURE MEDIA</h4> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p> 
 
       </div> 
 

 
      </div> 
 
       <hr> 
 
      <div class="row"> 
 
       <div class="four columns"> 
 
        <div id="video">  
 
         <h3>VIDEO</h3> 
 
         <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;"> 
 
        </div> 
 
       </div> 
 
       <div class="four columns"> 
 
        <div id="blog"> 
 
         <h3>BLOG</h3> 
 
         <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;"> 
 
        </div>  
 
       </div> 
 
       <div class="four columns"> 
 
        <div id="faq"> 
 
         <h3>FAQ</h3> 
 
         <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;"> 
 
        </div> 
 
       </div><hr> 
 
      </div>   
 
     </div> 
 
    </section>

来源

2017-07-02 Mike.Whitehead

相当困难的调试时，张贴代码不会重现相同的输出图像显示.... – LGSon

我相信他用古比CSS框架的https： //cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css基于'class =“四列”'仍然无法让它完全复制图片的外观虽然。 –

@LGSon我正在使用网站的骨架网格，是你指的是什么？ –

的hr已经给出了框架式的，所以如果你给它这样一个类，它将覆盖默认。

为什么它不是垂直的文本和图像部分之间的垂直定位的主要原因是文本行和图像行不具有相同的顶部/底部边距/填充，所以我增加了边缘顶部/底部a很少，第二张hr，后面的图片，被放置在row之内，所以我把它移到了外面。

为了准确确定它们之间的关系，您已详细说明了行的填充/边距。

栈片断

hr.hr250center { 
 
    display: block; 
 
    width: 250px; 
 
    margin-top: 2em; 
 
    margin-bottom: 2.5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-style: inset; 
 
    border-width: 1px; 
 
    border-color: red;    /* here you set color */ 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 

 
<section id="welcome"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="twelve columns"> 
 
     <h4>WELCOME TO FEATURE MEDIA</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque 
 
      facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus 
 
      ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis 
 
      lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p> 
 
     </div> 
 
    </div> 
 
     <hr class="hr250center"> 
 
    <div class="row"> 
 
     <div class="four columns"> 
 
     <div id="video"> 
 
      <h3>VIDEO</h3> 
 
      <img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
     <div class="four columns"> 
 
     <div id="blog"> 
 
      <h3>BLOG</h3> 
 
      <img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
     <div class="four columns"> 
 
     <div id="faq"> 
 
      <h3>FAQ</h3> 
 
      <img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <hr class="hr250center"> 
 
    </div> 
 
</section>

来源

2017-07-02 21:23:26 LGSon

您可以使用的选项：“填充顶”或“填充底”

<section id="welcome"> 
    <div class="container"> 
     <div class="row" style="padding-bottom: 50px;"> 
      <div class="twelve columns"> 
       <h4>WELCOME TO FEATURE MEDIA</h4> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p> 
      </div> 

     </div> 
     <hr> 
     <div class="row" style="padding-top: 50px; padding-bottom: 50px;"> 
      <div class="four columns"> 
       <div id="video"> 
        <h3>VIDEO</h3> 
        <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;"> 
       </div> 
      </div> 
      <div class="four columns"> 
       <div id="blog"> 
        <h3>BLOG</h3> 
        <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;"> 
       </div> 
      </div> 
      <div class="four columns"> 
       <div id="faq"> 
        <h3>FAQ</h3> 
        <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;"> 
       </div> 
      </div> 
     </div> <hr> 
    </div> 
</section>

来源

2017-07-02 21:15:23

CSS - 定位水平线

回答

相关问题