Question

我正在使用引导程序'featurette'功能。在页面上左侧有一个文本，右侧有图像。缩小浏览器大小时，它们会相互叠加，文本位于顶部，图像位于底部。如何更改此图像以使图像更清晰，然后在下面进行书写？

广告示例在这里http://getbootstrap.com/examples/carousel/

如果您注意到功能部分，您将在调整大小时看到我的意思。

我已经尝试过更改浮动位置，因为这是我能想到的唯一的东西，但它没有用。

P.s只是为了澄清，我仍然希望它们在超过756px（或无论大小是什么）时是相同的位置，但只是想在上面的例子中改变大小时顶部的图像。

Answer 1

您应该对两者的容器使用display：flex属性，并使用元素的order属性，例如下面。尝试更改元素的顺序并查看。

.elements-container{
  background: #000;
  width: 100%;
  height: 500px;
  display: flex;
 }
.text-box{
  order: 2;
  width: 200px;
  height: 200px;
  color: #ffffff;
  background: #ff0000;
  display: block;
 }
.image-box{
  order: 1;
  width: 200px;
  height: 200px;
  display: block;
 }

<div class="elements-container">
  <div class="text-box">This is text</div>
  <div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>

CSS中的图像首先显示响应

1 个答案: