堆栈内存溢出
  繁体   English   中英

连续对齐3个部分标签

[英]Aligning 3 section tags in a row

 原文  2018-06-02 15:15:33  9   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