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 - 定位水平線

回答

相關問題