时间戳

首页 > 解决方案 > 如何在不使用容器元素的情况下实现这种响应式设计？

html - 如何在不使用容器元素的情况下实现这种响应式设计？

问题描述

我想使用此代码进行以下布局。这是一个粗略的说明：

台式机和平板电脑布局

我还为移动布局添加了一个媒体查询，它只会将元素堆叠在一起。

我的代码

现在，我没有选择 section 的容器元素，也没有将文本放在section 内的单独段落元素中，我知道这将解决问题。

但是有什么方法可以在不修改现有 HTML 结构的情况下实现所需的布局？

当我使用 Chrome 开发工具进行检查时，我可以看到存在许多问题。

  1. 通过拖动窗口最小化屏幕宽度时，右边距与屏幕右边缘一起折叠。
  2. 使用 12 网格测量无法实现布局，例如，如果我将桌面媒体查询的宽度设置为小于 100%，它会以某种方式适合，但我想这样做是非常错误的。
  3. 对于平板电脑布局，我无法让第三部分元素拉伸屏幕的整个宽度，尽管我将它放在一个单独的<div元素中，带有<div class = "width">.

那么，将结构修改为这样的唯一方法吗？

<div class="row">
            <div class="container col-lg-4 col-md-6 col-sm-12">
                <section> 
                    <div id="beef" >Beef</div>
                    <p>
                    Lorem ipsum...
                    </p>
                </section>
            </div>
    </div>

编辑：没有使用 CSS 框架。

标签： htmlcssresponsive-design

解决方案

您问的问题（容器元素对于响应式设计绝对必不可少吗？）是的，使网站具有响应性是正确的，我们使用容器进入下一部分，您希望菜单项在此中查看（https://i.stack。 imgur.com/OAmDC.png）是对的吗？所以我检查了你发送的你写的代码是

<div class="row">
    <section class="col-sm-12 col-md-6 col-lg-4">

        <section class="secheader" id="head1">name</section>
          description
    </section>
</div>

同样对于所有项目，所以请记住一件事，当您想并排显示一些项目时，您应该将所有这些存储一次 div 所以所有这些都将并排（抱歉我的解释可能不清楚）参考此https://getbootstrap .com/docs/4.1/layout/grid/ 所以你可以这样写

<div class="container ">
    <div class="row">
       <div class="col-4">
          <h3>iteam 1</h3>
          <p>description</p>
       </div>
       <div class="col-4">
          <h3>iteam 2</h3>
          <p>description</p>
       </div>
       <div class="col-4">
          <h3>iteam 3</h3>
          <p>description</p>
       </div>
    </div>
 </div>

希望你知道上面的代码是为了并排显示 3 个项目谢谢

推荐阅读