Question

我有两个div彼此相邻。右侧div包含图像，左侧div包含文本。我试图弄清楚当图像开始覆盖图像时如何使正确的div移动到图像下方，因为浏览器窗口变小了。

下面是HTML和CSS。我应该如何调整CSS？任何帮助表示赞赏。

HTML：

if ($_SERVER['HTTP_HOST'] == "localhost") {
$path=public_path().'/assets/videos/tutorials\/';
}
else{
$path='assets/videos/tutorials/';
}
$request->file('video')->move($path, $video);

CSS：

        <div class="divcontainer">

            <div class="leftdiv"><img src="images.jpg" alt="image"></div> 

            <div class="rightdiv">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Hic quoque suus est de summoque bono dissentiens dici vere 
            Peripateticus non potest. Duo Reges: constructio interrete. 
            Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit 
            alias, nunc tantum pos
            </p>
            </div>

        </div>

Answer 1

使用flexbox：

＆＃13;

*,
*:before,
*::after {
  box-sizing: border-box
}

body, p {
  margin: 0
}

.divcontainer {
  display: flex;
  flex-wrap: wrap;
  background: lightblue;
}

.divcontainer>div {
  border: 1px solid red;
  margin: 5px;
}

.leftdiv {
  flex: 0 20%
}

.rightdiv {
  flex: 0 70%
}

img {
  display: block;
}

＆＃13;

<div class="divcontainer">
  <div class="leftdiv"><img src="//placehold.it/200x200" alt="image"></div>
  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>
</div>

＆＃13;

如果您希望在较小的屏幕中拥有完整的width个块，则可以创建类似以下内容的媒体查询：

＆＃13;

*,
*:before,
*::after {
  box-sizing: border-box
}

body,
p {
  margin: 0
}

.divcontainer {
  display: flex;
  flex-wrap: wrap;
  background: lightblue;
}

.divcontainer>div {
  border: 1px solid red;
  margin: 5px;
}

.leftdiv {
  flex: 0 20%
}

.rightdiv {
  flex: 0 70%
}

img {
  display: block;
}

@media(max-width:640px) {
  .divcontainer>div {
    flex: 0 100%
  }
}

＆＃13;

<div class="divcontainer">
  <div class="leftdiv"><img src="//placehold.it/200x200" alt="image"></div>
  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>
</div>

＆＃13;

Answer 2

使用媒体查询将两个元素切换到特定屏幕宽度以下的100％宽度（我的代码段中为500px）：

（请注意，我还为图像本身设置了一个规则来填充其容器宽度，除非它变得比原始宽度宽 - 在我的示例中为350px）

  .divcontainer {
  padding: 10px;
}

.leftdiv {
  float: left;
  width: 20%;
  margin: 1%;
  padding: 1%;
}

.leftdiv img {
  width: 100%;
  max-width: 350px;
}

.rightdiv {
  float: left;
  width: 70%;
  margin: 1%;
  padding: 1%;
}

@media screen and (max-width: 500px) {
  .leftdiv,
  .rightdiv {
    width: 100%;
  }

<div class="divcontainer">

  <div class="leftdiv"><img src="http://placehold.it/350x240" alt="image"></div>

  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>

</div>

Answer 3

您将它们指定为20％和70％宽度。这意味着它们总是适合一条线，因为它们永远不会覆盖100％的宽度。您必须使用media-query来指定CSS应该更改的断点。

溢出时包装div

3 个答案: