Question

我正在尝试设计HTML / CSS的一部分，其中我有一个flexbox父元素，它是具有3个子文本框的起始视口的宽度和高度。

我的目标是让页面上的所有3个元素都可见，而无需滚动。

我的目标是让所有3个文本框都清晰可辨，并根据给定的视口调整大小，而不会被推开。

查看HTML，尽管尝试将宽度保持在100％，但似乎内容已从视口推到右侧。基本上，我怎样才能拥有3个易于修改的柔性盒，无论对它们做出什么改变，都能保持清晰，并且在视口的宽度和高度范围内？

我的代码：

.intro_header {
  display: flex;
  width: 100%;
  padding: 10% 10% 5% 10%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  flex-wrap: wrap;
  justify-content: space-between;
}


/* Generic flexbox paragraph text div that can be used for one column display regardless of responsiveness */


/*can swap around elements using the order: style */

.oneColumnText {
  width: 100%;
  text-align: center;
}

<div class="intro_header" style="background-image: foo.jpg">

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
      felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
    </p>
  </div>
</div>

https://jsfiddle.net/eg14v3po/1/

Answer 1

将此添加到您的代码中：

* { box-sizing: border-box; }

body { margin: 0; }

＆＃13;

.intro_header {
  display: flex;
  padding: 10% 10% 5% 10%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  flex-wrap: wrap;
  justify-content: space-between;
}

.oneColumnText {
  width: 100%;
  text-align: center;
}

*    { box-sizing: border-box; }
body { margin: 0; }

.oneColumnText {
  border-bottom: 1px solid lightgray; /* for demo only */
}

＆＃13;

<div class="intro_header" style="background-image: foo.jpg">

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
      felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
    </p>
  </div>
</div>

＆＃13;

使用border-box属性的box-sizing值，您指定的padding会计入width / height计算（{{3} }）。

在margin: 0元素上使用body，您将覆盖浏览器设置的默认边距（more details）。

适合视口中的所有元素而不滚动

1 个答案: