给予宽度和边距自动，但保持背景+ Flexbox

时间：2017-07-23 21:03:12

标签： html css css3 flexbox

我确信这已在某个地方得到解答，但我似乎无法找到它。

我希望2个flexboxed div中的文本也在90vw宽度内，但我也希望背景不要缩短。

无论如何，这就是我现在所拥有的。

.width {
  width: 90vw;
  margin: auto;
}

.container {
  display: flex;
}

.top {
  background-color: red;
}

.left {
  background-color: yellow;
}

.right {
  background-color: green;
}
<div class="top">
    <p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
 </div>

<div class="container width">
  <div class="left">
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：2)

这可能比你想象的容易：

  • 将padding: 0 5vw添加到.top
    • 两侧的空格
  • padding-left: 5vw至.left
  • padding-right: 5vw至.right
  • 和max-width: 100%到.top以保留子元素

请参阅下面的代码。

确保进一步滚动并检查额外的演示代码，其中显示了基本的响应式条带模式，没有您可以立即使用的@media查询！

＆＃13;
＆＃13; 
/*
.width { REMOVE
  width: 90vw;
  margin: auto;
}
*/
.container {
  display: flex;
  max-width: 100%; /*ADD flexbox likes this */
}

.top {
  background-color: red;
  padding: 0 5vw; /*ADD left and right */
}

p { margin: 0 } /* otherwise some HTMNL default margins */

.left {
  background-color: yellow;
  padding-left: 5vw; /*ADD align with top */
}

.right {
  background-color: green;
  padding-right: 5vw; /*ADD align with top */
}

*   { outline: 1px dashed } /* show element outlines for debug, remove when done */
＆＃13; 
<div class="top pad">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
 </div>

<div class="container">
  <div class="left">
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

DEMO ADD：没有@media查询的通用响应条带

目前你可以看到很多（彩色）带状网站，有英雄，导航，吸引力，介绍，图库，演示等等左右两侧带有很多空白区域（1920px两侧超过320px）宽度显示）。

在一个不错的小响应式演示（根据您的问题）下，您可以直接使用。

它有

  • 外.band类充当主带容器
  • .band-inner课程，其中包含您的必需内容
  • 几个响应式T / L / B / R填充物，用于内部区域内的内容。
  • 无需任何@media查询

检查代码是否有扩展评论，然后转到MathIsFun: Equation of a Straight Line以获得有关所用数学的简单而详尽的解释。

＆＃13;
＆＃13; 
/* responsive root font-size: y=mx+b => p1(320,14) p2(1280,20) (see below equations) */
html { font-size: calc(.00625 * 100vmin + .75rem) }
/* 
    using "Intercept-slope" equation: y = mx + b for points p1(x1,y1), p2(x2,y2)
    where           m = (y2-y1)/(x2-x1)
                    b = y1 - m * x1
                    x = 100VMIN/VH/VW (use vmin for fonts, vh for heights, vw for widths) 
*/
.band { /* main flexbox container for banded page layout */
    display: flex;
    flex-flow: row wrap; /* a row of several columns */

}
.band-inner { /* immediate child element, flexbox containers too */
    display: flex;
    flex-flow: row wrap; /* some default preferences */
    flex: 1 1 20rem;        /* grow to max available space, but wrap when less than 320px (mobile) */
}
.band-inner > * {    /* for mobile support: all inner child elements fill available space, also wrap at 320px */
    flex: 1 1 20rem; /* grow to max available space, but wrap when less than 320px (mobile) */
}
.pad { /* responsive band padding */
    padding: calc(0.025 * 100vh + 0.5rem)  /* responsive T/B p1(320,16), p2(1280,40)  */ 
             calc(0.19  * 100vw - 2.75rem) /* responsive L/R p1(320,16), p2(1920,320) */
}
.pad-t { padding-top   : calc(0.025 * 100vh + 0.5rem)  } 
.pad-b { padding-bottom: calc(0.025 * 100vh + 0.5rem)  } 
.pad-l { padding-left  : calc(0.19  * 100vw - 2.75rem) }
.pad-r { padding-right : calc(0.19  * 100vw - 2.75rem) }

body, p { margin: 0 } /* otherwise some HTMNL default margins, I always use this */

/* demo */
.band-inner p { padding: 1rem } /* nicely spaced inside parent */

.b1  { background-color: cornflowerblue }
.b2a { background-color: tomato }
.b2b { background-color: yellowgreen }

*   { outline: 1px dashed } /* show element outlines for debug, remove when done */
＆＃13; 
<div class="band">
    <div class="band-inner pad">
        <p class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
    </div>
</div>
<div class="band">
    <div class="band-inner pad">
        <p class="b2a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
        <p class="b2b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我移动了您的课程width并将其放在top上，而是在p的左侧和右侧添加了填充。

最初，根据您在问题中发布的代码，红色上部容器未跟随您想要的90vw，因此我不得不更改它。

＆＃13;
＆＃13; 
.width {
  width: 90vw;
  margin: auto;
}

.width_half {
  width: 45vw;
  margin: auto;
}

.container {
  display: flex;
}

.top {
  background-color: lightblue;
}

.left {
  background-color: lightgreen;
}

.right {
  background-color: silver;
}
.left p,
.right p {
  padding: 0 3vw;
}
＆＃13; 
<div class="top">
    <p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
 </div>

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题