Question

我尝试根据设备宽度设置两种不同的布局，因此我更喜欢两种布局相同，只需在CSS中使用媒体查询。

在这两款设备上，我都会有一个图像（由绿框表示），它始终位于屏幕的左上角。就在它旁边，标题div也总是在同一个地方。

最有问题的div是描述div。如果它位于桌面上，则该div应该与标题对齐，但如果它在移动设备上，它应该独立于图片下方。

使用float生成以下图像，但使用float也不理想，因为如果描述div足够长，它最终将流向左边（在桌面上），这不是所需的外观。在桌面上，它应该始终是两个清晰的列，描述不应该最终在图像div下面流动。

我很感激有关如何使用flexbox执行此操作的任何指导，谢谢！

作为参考，这是我对float的尝试（注意我不想使用float）：

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2a {
    border: 1px solid blue;
}

.div2b {
    border: 1px solid red;
}


.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4a {
    border: 1px solid blue;
}

.div4b {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>

<br />

<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>

</body>
</html>

Answer 1

这可能是一种解决方案。请注意，您已在css代码中提供了图像的尺寸（绿色框）。我基于这个代码。

这是Jsfiddle：

＆＃13;

.div1 {
    position: absolute;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2a {
    border: 1px solid blue;
    padding-left: 120px;
}

.div2b {
    border: 1px solid red;
    padding-left: 120px;
}


.div3 {
    position: absolute;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4a {
    border: 1px solid blue;
    padding-left: 120px;
}

.div4b {
    margin-top:50px;
    border: 1px solid red;
}

＆＃13;

<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>

<br />

<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>

＆＃13;

Answer 2

＆＃13;

#container {
  display: flex;
  flex-flow: column wrap;
  height: 300px;
  max-width: 100%;
  border: 1px dashed black;
}

.div1 {
  flex: 0 0 100%;
  text-align: center;
  background-color: lightyellow;
}

.div1 > img {
  width: 150px;
}

.div2a {
  width: calc(100% - 150px);
  background-color: aqua;
}

.div2b {
  width: calc(100% - 150px);
  background-color: lightpink;
}

@media ( max-width: 600px) {
  #container {
    flex-direction: row;
    height: auto;
  }
  .div1 {
    flex-basis: 150px;
  }
  .div2a {
    flex: 1;
  }
  .div2b {
    flex-basis: 100%;
  }
}

＆＃13;

<div id="container">
  <div class="div1"><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
  <div class="div2a">div2a - Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div>
  <div class="div2b">div2b - Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
    Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
    Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
</div>

＆＃13;

jsFiddle

Answer 3

您可以在桌面说明中使用margin，以防止它在左侧流动。然后在移动设备上清除浮动。

.img {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.desktop .desc {
  margin-left: 126px;
}

.mobile .desc {
  clear: left;
}

<div class="desktop">
  <h2>On Desktop</h2>
  <div class="img"></div>
  <div class="title">title</div>
  <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
    Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </div>
</div>

<div class="mobile">
  <h2>On Mobile</h2>
  <div class="img"></div>
  <div class="title">title</div>
  <div class="desc">Description</div>
</div>

Answer 4

为您的代码添加非常简单以使其正常工作：

添加＆＃34;溢出：隐藏＆＃34;到描述。那么当它足够长时它就不会向左流动。

它起作用的原因是因为有一些名为＆＃34; Block Formatting Context＆＃34;。这基本上是告诉浏览器内部内容是＆＃34;隔离＆＃34;阻止，应该被视为一个。

请参阅下面的代码：https://jsfiddle.net/pkmewz3n/

.description-fixed {
    overflow: hidden;
}

Answer 5

不幸的是，这不是flexbox的候选者 - 你有使用行和列排列的元素。

我建议改为绝对定位。在下面的示例中，分配给description和title元素的margin-left是图像的宽度。

由于我在媒体查询中添加了内容，因此您需要展开代码段并调整浏览器大小以查看效果。

＆＃13;

.container {
  position: relative;
}

@media screen and (min-width: 600px) {
  .image {
    position: absolute;
    left: 0;
    top: 0;
  }
  .description,
  .title {
    margin-left: 100px;
    padding-left: 10px;
  }
}

＆＃13;

<div class="container">
  <div class="title">
    <h1>Title</h1>
  </div>
  <div class="image">
    <img src="#" width="100px" height="100px">
  </div>
  <div class="description">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa ratione tenetur magnam veniam ducimus eius quos ipsum, culpa illum autem, quam repellendus ea, numquam omnis animi laudantium doloremque corporis?</p>
  </div>
</div>

＆＃13;

如何使用flexbox根据设备宽度重新流动div？

5 个答案:

jsFiddle