响应式设计破解
当画面消失元素的部件所以我认为这是一个相当不错的网页。而且我明白为什么这个例子不适合干净地放进一个JSfiddle,也不能轻易将它推入一个简单的例子。
当你走到一个狭窄的显示设备时,我确实看到了图像消失的问题。所以我想你的问题在这里...
<style type="text/css">
.no-padding.img-2 {
background: url(http://fakeimg.pl/300/) scroll center no-repeat;
background-size: cover;
position: absolute;
height: 100%;
}
.no-padding.img-3 {
background: url(http://fakeimg.pl/300/) scroll center no-repeat;
background-size: cover;
height: 560px;
}
</style>
Image-2是你的图像推左执行,Image-3是你的图像推向右实施。他们肯定没有相同的CSS ...我认为同样的问题也出现在您的匹配块文本中。 Position: Absolute
,Height:100%
vs固定像素高度将导致奇数输出。
我还不懂的类选择左/右元素之间:
<div class="col-sm-6 no-padding img-2 ">
VS
<div class="col-sm-6 col-sm-offset-6 no-padding gray">
为什么.col-sm-offset-6
甚至还出现呢? Reference here. .col-sm-offset-X类强制东西去偏移量,在这种情况下,它将元素推到屏幕的右侧,但是如果你甚至有一个宽度像素问题,那么它会将元素弹出并且可能变得丑陋。为什么不让一切都浮起来?
简答题。
丢失.col-sm-offset-6
清理图像的CSS(丢失position: absolute
)在我的浏览器中正常工作。
编辑。哎哟。直到现在,我还没有看到@AndyHolmes的评论。我正在测试和写这个答案。看起来他打了我一分钟。
Oke,谢谢你帮忙。买了这个模板,并使用各种文件中的一些元素将它们放在一起。现在看看你的建议东西 –
这是一种强硬的呼吁,要求每个图像中的每个图像都“手动”固定高度,而不依赖于内容高度,不是吗?可能是 – robjez
,但这是我的初学者补丁编程:) –
不幸的是,我认为接受的答案并不能确定您的布局真正的问题,并且本身会引入更大的问题,例如需要手动设置图像容器的heights
。
(我原来的复制问题this JSFiddle)
你的问题可以减少到两个相邻浮动列设置相等的高度的问题。这是设计界的一个众所周知的问题,Chris Coyer在this post中解决了这个问题。
我得出的结论是,你可以采取稍微不同的方法来解决这个问题。通过首先使用移动设备,您可以让您的生活更轻松并减少代码量。你首先建立基本的1列布局,你需要假设的唯一的东西是你的图像容器的height
。
由于这是1列布局,所以最好在此修复图像的height
,因为它们不取决于相邻列的height
。
要增加视口的大小,您将使用媒体查询设置一个断点,其中1列布局变为2列布局,并且两列彼此相邻。现在,这就是您遇到问题的高度相同的列。一方面,您希望您的容器以与其他列内容增长相同的方式垂直增长。
这就是flexbox
如果你只想使用它的地方。它的作用是自动等于两个列高度,这可以免除您手动设置每个图像容器heights
,这是我认为的很好。您可以使用最少量的代码(并且不需要引导程序,这在我看来总是一种奖励),可以适应任何给定数量的内容,从而获得灵活,流畅和移动优先的布局。
我在这个最小的JSFiddle中简化并复制了所需的布局,所以请随时根据您的需求进行调整。
.row {
display: block;
overflow:hidden;
background: #f0f0f0;
width:100%;
margin-bottom:10px;
}
.bgImg,
.text {
width:100%;
}
.bgImg {
background: url("http://placehold.it/350x150") no-repeat center center;
background-size: cover;
height: 150px;
}
h4 {
margin-top:0;
}
@media (min-width: 768px) {
.row {
display:flex;
}
.bgImg,
.text {
width:50%;
float:left;
}
.bgImg {
height: initial;
}
}
<section class="row">
<div class="bgImg"></div>
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
</article>
</section>
<section class="row">
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
</article>
<div class="bgImg"> </div>
</section>
<section class="row">
<div class="bgImg"></div>
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
</article>
</section>
你能发布一些代码,所以我们实际上可以帮助你吗?给我们一些东西,建立在 – Li357
在问题本身* [mcve] *。 – jonrsharpe
究竟是不是在这里工作?您仍然有响应网站。 – robjez