- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不得不承认在这个问题上失败了,这让我非常沮丧,就在我以为我已经理解了 flexbox 的时候!为奇怪的描述道歉,但问题比描述的更容易显示。
我需要什么:所有四个带标签的 div(标题、左、右、左下方)都必须位于一个公共(public)容器中。左列和右列各占一半空间,但无论 RIGHT 的高度如何,UNDER-LEFT 都必须塞入 LEFT 下方。
我得到的是什么: 目前,当我增加 RIGHT 的高度时,它正在将 UNDER-LEFT 向下推:(
到目前为止我的代码
<style>
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 250px;
flex: 0 0 50%;
}
#right {
background-color: lightblue;
flex: 0 0 50%;
}
#under-left {
background-color: lightgreen;
flex: 0 0 50%;
}
</style>
<body>
<div id="container">
<div id="heading">
<p>title</p>
</div>
<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>
<div id="right">
<p>RIGHT, basis 50%</p>
</div>
<div id="under-left">
<p>UNDER-LEFT</p>
</div>
</div>
</body>
我尝试过的:老实说,我完全不知所措。我尝试过 float 元素,但当然 flex 会忽略 float 元素。我不知道还能尝试什么,这不是懒惰,因为我花了大约 25 分钟来创建这篇文章。我已经在 SO 上搜索了其他答案(例如 CSS Flex Box Layout: full-width row and columns ),但没有一个具有 wrap-under 元素问题。
请善待!
最佳答案
像这样使用 flexbox
(需要标记更改)
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
flex: 1;
}
#right {
background-color: lightblue;
flex: 1;
padding: 20px;
}
#left-top {
background-color: red;
padding: 20px;
}
#left-bottom {
background-color: lightgreen;
padding: 20px;
}
<div id="container">
<div id="heading">
<p>title</p>
</div>
<div id="left">
<div id="left-top">
LEFT height 250, basis 50%
</div>
<div id="left-bottom">
UNDER-LEFT
</div>
</div>
<div id="right">
RIGHT, basis 50%
</div>
</div>
更新基于无法包裹左侧 div
的评论
请注意,这对于 flexbox
和未包装的 div
可能是可行的,但我需要知道布局应该是什么样子。
这是一个 float 版本,它可以在较小的屏幕上使用 flexbox
,使用 @media
查询以可视方式重新排列元素。
要使 under-left
始终位于 left
下方,而不管 right
的高度如何,您需要使它们比right
(这里是1px),左边的 float left
,右边的 float right
样本,右
下
#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 100px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}
<div id="container">
<div id="heading">
<p>title</p>
</div>
<div id="right">
<p>RIGHT, basis 50%</p>
</div>
<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>
<div id="under-left">
<p>UNDER-LEFT</p>
</div>
</div>
样本,右
更高
#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 250px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}
<div id="container">
<div id="heading">
<p>title</p>
</div>
<div id="right">
<p>RIGHT, basis 50%</p>
</div>
<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>
<div id="under-left">
<p>UNDER-LEFT</p>
</div>
</div>
根据另一条评论更新 2
这是一个结合了 flexbox
和 @media
查询的 float 版本,这将使它们在较小的屏幕上以正确的顺序/大小显示
#container {
width: 580px;
background-color: rgb(240, 240, 240);
}
#heading {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#left {
background-color: red;
height: 150px;
float: left;
width: calc(50% + 1px);
}
#right {
background-color: lightblue;
height: 200px;
float: right;
width: calc(50% - 1px);
}
#under-left {
background-color: lightgreen;
float: left;
width: calc(50% + 1px);
}
@media screen and (max-width: 600px) {
#container {
display: flex;
flex-direction: column;
}
#left,
#under-left,
#right {
float: none;
width: auto;
}
#right {
order: 1;
}
}
<div id="container">
<div id="heading">
<p>title</p>
</div>
<div id="right">
<p>RIGHT, basis 50%</p>
</div>
<div id="left">
<p>LEFT height 250, basis 50%</p>
</div>
<div id="under-left">
<p>UNDER-LEFT</p>
</div>
</div>
关于CSS Flexbox - 带有 'content wrap under' 难题的两列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38455550/
我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。 我使用 flex-wrap: wrap; 它在 Firefox 和 Chrome 中完美运行: 但是 Internet Explorer
我很惊讶地发现我的 white-space: pre-wrap;文本在 > 换行和 "人物。我以为它只会换行,- , 以及一个或多个空格之后。 这是一个fiddle . 它在" 之后换行, 在
我被分配了重新创建以下网站的任务:https://plantanapp.com/learn 我做了一些事情,但是每次我解决一个问题时,都会出现另外两个问题。 我是HTML和CSS的新手,并不真正了解元
我偶然发现了 jQuery 的 wrap() 函数。 当我试图包装两个 div 标签时,它们之间有一些文本,而不是两个 div 之间没有文本时,它的行为不知何故不同。 j查询: var wrapper
我正在尝试在 w3c css 验证器上验证一个 css 文件。当它被测试时,它返回一个错误,指出 “属性 flex-wrap- 不存在:wrap”。这是我 css 验证器认为错误的部分。 .row {
这个问题在这里已经有了答案: Flex items create space between them when they wrap [duplicate] (1 个回答) 关闭 6 年前。 我正在
我正在制作一个网页,其中的标题有一个主要主题和一个描述符,每个都包含在标签中。 我已经查找了 标签,它似乎只在你有长字符串时才有效没有空格。但是我在文本中断断续续地有空格。 我需要的是我可以在两个元
我听到很多关于 wrap 面板加载速度较慢的消息,因此我们需要一个虚拟化面板。 有人可以给我一个小的环绕面板示例,它可以证明加载速度较慢等它需要一个虚拟面板。 我设置了一个环绕面板作为列表框的面板控件
我需要用 sinon 多次包装一个方法,以便能够根据参数返回不同的对象。我该怎么做? 我要测试的 Controller 看起来像这样: const servicePackagesOfferingRep
我在运行测试时收到了上述错误消息。下面是我的代码(我正在使用 Backbone JS 和 Jasmine 进行测试)。有谁知道为什么会这样? $(function() { describe("Ca
问题是关于.text-wrapper,它有display:flex; flex-wrap:wrap 应用于它。使用 flex-wrap:wrap 的原因是,否则 .text-wrapper 和 .ta
我有三个带有 Bootstrap 3 的 DIV 容器,其中前两个在第一行,第三个在下一行,直到浏览器宽度直到 991 px。高于 992 px,所有三个容器应排成一行。每行容器的高度应该是最高的 (
(我使用的是 Chrome v.39+) 我正在尝试使用 flex-wrap 属性水平和垂直堆叠子 div,但我看到了一些非常奇怪的行为。例如,如果有 3 个子 div,最后一个的宽度为 100%(使
我必须这样做。适用于宽屏、中屏和小屏 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg 这是我的代码 .section-items-c
我想要一个每行 3 个元素的容器 flex div,问题是当我添加第四个元素时(它应该自动换行到第二行),而不是它停留在一行并缩小其他元素。我启用了 flex-wrap: wrap; 这是我的代码:
假设我正在使用一个带有 flex-direction:row 和 flex-wrap:wrap 的 flexbox 容器。 根据浏览器窗口的大小,每行中可能有 2、3、4 或更多项。 我想在每隔一行的
我已经添加了所有属性。当我更改浏览器宽度时,它们开始相互粘连,这是因为我有太多图像而无法正常工作? 无法将图像换行: #skills>div { margin-top: 80px; displ
我想制作一个网格,其中每行有两张图片。我正在使用 flex-wrap: wrap;它在 android 4.4+ 上运行良好,但不适用于低于 android 4.4 的系统。我想在不使用 flex-w
我的网站出现异常行为。我最近在网站管理员工具上发现,它发现我网站上的许多网页都出现抓取错误 404。我无法理解这些页面是如何创建的,因为所有 404 页面最后都包含这几个字 wrap-function
我正在使用 MongoDB C# 驱动程序构建一些更新语句。 The C# API在 Builder 命名空间中包括 Wrapped 和“Un-Wrapped”方法。 从表面上看,这些似乎因泛型不同而
我是一名优秀的程序员,十分优秀!