堆棧內存溢出
  簡體   English   中英

連續對齊3個部分標簽

[英]Aligning 3 section tags in a row

 原文  2018-06-02 15:15:33  2   3    html5/ css3/ bootstrap-4/ twitter-bootstrap-4-beta

問題描述

我連續有3個section標簽，但要留出空白，最后一個section標簽會滑到下一行，而不是保持在一行中。 我嘗試使用float:left和display:inline屬性，但無法正常工作。

這是我的代碼： 

 #main-content h2 { color: #000; margin-top: 10px; margin-bottom: 30px; } #main-content section { background-color: #6c757d; color: #000; border: 1px solid #000; padding: 0px 0px; margin-left: 5px; width: 33%; } #main-content h3 { color: #000; } #main-content p { font-size: 14px; } 
 <div id="main-content" class="container-fluid"> <h2 class="text-center">Our Menu</h2> <div class="row"> <section class="col-md-4 col-sm-6 col-12 "> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </section> <section class="col-md-4 col-sm-6 col-12"> <h3 class="text-center">Beef</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </section> <section class="col-md-4 col-sm-12 col-12"> <h3 class="text-center">Sushi</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </section> </div> </div>

3 個解決方案

解決方案1
 1  2018-06-02 16:54:43

我沒有你所有的風格。 如果它們沒有沖突，請進行以下工作。 

<html>
<style>
#main-content h2 {
  color: #000;
  margin-top: 10px;
  margin-bottom: 30px;
}

#main-content section {
  background-color: #6c757d;
  color: #000;
  border: 1px solid #000;
  padding: 0px 0px;
  margin-left: 0.5%;
  width: 32%;
  display:inline-block;
  height: 500px;
  float: left;
}

#main-content h3 {
  color: #000;
}

#main-content p {
  font-size: 14px;
}

.row {
  width: 100%;
  overflow: hidden;
  display:inline;
}
</style>

<body>
  <div id="main-content" class="container-fluid">
  <h2 class="text-center">Our Menu</h2>
  <div class="row">
    <section class="col-md-4 col-sm-6 col-12 ">
      <h3 class="text-center">Chicken</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
    <section class="col-md-4 col-sm-6 col-12">
      <h3 class="text-center">Beef</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
    <section class="col-md-4 col-sm-12 col-12">
      <h3 class="text-center">Sushi</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
  </div>
</div>
</body>
</html>

注意：左邊距：5px與寬度：33％沖突。 如果窗口寬度為900px，則3個部分將占99％= 891px。 3個邊距總共需要3 x 5px = 15px。 總寬度為891 + 15 = 906px> 900px。 因此，您的最后一部分將移至下一行。 為了避免這種情況，您可以使用以百分比表示的邊距，例如左邊距：0.5％

解決方案2
 1 已采納  2018-06-02 19:28:50

  • 不能對row列使用margin-left和margin-right 。

  • 無法使用width作為列，因為col-*已具有寬度。

    我了解您為什么這樣做。 要實現所需的功能，請為該部分的內容使用一個新的container元素，並為其使用background 。 

 .bg-gray { background-color: #6c757d; } .border-1px-dark { border: 1px solid; } #main-content p { font-size: 14px; } 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div id="main-content" class="container-fluid"> <h2 class="text-center mt-2 mb-5">Our Menu</h2> <div class="row"> <section class="col-md-4 col-sm-6 col-12 "> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> <section class="col-md-4 col-sm-6 col-12"> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> <section class="col-md-4 col-sm-12 col-12"> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> </div> </div>

  • 樣式，例如color:000; 是沒有用的，因為默認情況下，字體顏色為black 。 僅當您希望文本的顏色不是black時才使用。

如果只想在移動設備的列之間留一些空間，請對這些部分使用pb-* pb-sm-0 。 

 .bg-gray { background-color: #6c757d; } .border-1px-dark { border: 1px solid; } #main-content p { font-size: 14px; } 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div id="main-content" class="container-fluid"> <h2 class="text-center mt-2 mb-5">Our Menu</h2> <div class="row"> <section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0"> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> <section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0"> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> <section class="col-md-4 col-sm-12 col-12 pb-4 pb-sm-0"> <div class="bg-gray border-1px-dark p-3"> <h3 class="text-center">Chicken</h3> <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p> </div> </section> </div> </div>

解決方案3
 0  2018-06-02 17:11:37

建議使用div標簽進行引導樣式。在CSS中對樣式進行硬編碼可能會影響網站的響應度。您可以在div外部section標簽中放置col類。

看看這個Codepen 使用Bootstrap對齊部分 

<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Chicken</h3>
            <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
                egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
                velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
                tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
                arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
                Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
                sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
                a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
                nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
        </section>
    </div>
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Beef</h3>
            <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
                egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
                velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
                tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
                arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
                Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
                sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
                a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
                nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
        </section>
    </div>
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Sushi</h3>
            <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis
                egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem
                velit, dictum eu erat vel, consectetur laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis
                tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend
                arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui, vehicula vehicula dui porta sed.
                Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur
                sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
                a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum
                nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
        </section>
    </div>
</div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Bootstrap 4 Li標簽未作為塊元素對齊 在一行/一行中對齊按鈕和日期時間選擇器 在.row中對齊圖標和文本的垂直中心 中心二 <section> 標簽彼此相鄰 如何使用 <section> 和 <article> HTML5中添加標簽？ 我要用 <section> 里面的標簽 <aside> ？ 無法識別的解決方法 <section> 舊版瀏覽器中的標簽 HTML5部分和輸入標簽中的CSS寬度 HTML 5 Section和Main語義標簽的使用 全選 <table> 具有的標簽 <input> 和 <section> 它們中的標簽
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM