首页 文章

纯CSS解决方案阻止流出网格

提问于
浏览 次
2

我已经说明了这种情况：
Example

蓝线表示网站所在的网格 . 让's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there'这个问题的解决方案不使用 calc() （由于旧浏览器）或 background-image （因为那不是很漂亮） .

是否有一种很好的方法来完成这项工作，只使用CSS同时保持内容在网格中居中，并且背景一直流到屏幕边框？

html css

2 回答

  • 3

    http://codepen.io/anon/pen/avoKwQ

    由伪元素和绝对定位完成 . 使用bootstrap进行更快速的演示 . 实际上，这是一个特定问题，我的解决方案可能不适合您的项目 . 当您需要水平滚动时尤其不起作用 . 但问题解决了 .

    &:after {
  content: " ";
  position: absolute;
  top: 0; right: 6px;
  width: 99999%;
  height: 100%;
  background: red;
  z-index: -1;
}

    此元素的父元素需要 position: relative . 在示例中，这是通过bootstrap完成的 .

    回复于
  • 2

    Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    这个有额外的好处，列始终是相同的高度：

    * { margin:0; padding:0; box-sizing: border-box; }
.grid {
    display: flex;
}

.col-3 { 
    flex: 1 1 320px;
    border-right: 20px solid #fff;
}
.col-2-3 { 
    flex: 1 1 640px;
}

.col-3 {
    display: flex;
    justify-content: flex-end;
}
.col-3>div {
    padding: 20px;
    flex: 0 1 300px;
}

.col-2-3>div {
    display: flex;
    justify-content: flex-start;
}
.col-2-3>div>div {
    flex: 0 1 640px;
    padding: 20px;
}

.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}

    <div class="grid">
    <div class="col-3 red">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
            </p>
        </div>
    </div><!-- col -->
    <div class="col-2-3 green">
        <div class="black">
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
                </p>
            </div>
        </div><!-- .black -->
        <div class="green">
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
                </p>
            </div>
        </div><!-- .green -->
    </div><!-- .col -->
</div><!-- .grid -->
    回复于

相关问题