首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在一行中对齐3个横断面标记

在一行中对齐3个横断面标记
EN

Stack Overflow用户
提问于 2018-06-02 23:15:34
回答 2查看 41关注 0票数 0

我在一行中有3个section标记,但在给出一个边距时,最后一个部分标记滑到下一行,而不是留在一行中。我尝试过使用float:leftdisplay:inline属性,但它不起作用。

下面是我的代码:

代码语言:javascript
运行
复制
#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;
}
代码语言:javascript
运行
复制
<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>

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50658314

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档