浮动不按预期工作
Float left not working as expected
我有 4 个 div,其中 display:flex 行向左浮动。我试图让它在屏幕尺寸缩小时做出响应。然而,方块不会 move.The .box 应该会在碰到边界时破裂。这是代码:
body{
background-color:grey;
}
.outer {
display: flex;
flex-direction: row;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
我在这里做错了什么?请帮忙,这里是 fiddle: Fiddle
解决方案:
添加 flex-wrap:wrap; .outer class 解决了问题
试试这个:
.outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
将flex-direction:row
改为flex-flow: row wrap;
:
body{
background-color:grey;
}
.outer {
display: flex;
flex-flow:row wrap;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
Flex wrap 将内容包裹在 display flex parent width 中,缩小子内容以适应 parent 宽度,以便它们适合一行。
flex-wrap: wrap
将内容包装成与自动换行相同的方式,如果内容在父级之外流动div,它将把它们包装到另一行。
这里是 flexbox 的完整指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4,它让您了解所有 flexbox 属性。
已更新 JSFiddle:
https://jsfiddle.net/s479vovz/145/
HTML:
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div style="width:25%;margin-right:1%;">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</div>
CSS:
body{
background-color:grey;
}
div {
display: block;
}
.outer {
display: flex;
flex-flow: row wrap;
float:left;
width: 100%;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
/* width: 180px; */
height: 250px;
margin: 10px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 1s, filter 1s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 77px;
height: 100px;
padding: 13px;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
我有 4 个 div,其中 display:flex 行向左浮动。我试图让它在屏幕尺寸缩小时做出响应。然而,方块不会 move.The .box 应该会在碰到边界时破裂。这是代码:
body{
background-color:grey;
}
.outer {
display: flex;
flex-direction: row;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
我在这里做错了什么?请帮忙,这里是 fiddle: Fiddle
解决方案: 添加 flex-wrap:wrap; .outer class 解决了问题
试试这个:
.outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
将flex-direction:row
改为flex-flow: row wrap;
:
body{
background-color:grey;
}
.outer {
display: flex;
flex-flow:row wrap;
float:left;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
width: 180px;
height: 200px;
margin: 10px;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 2s, filter 2s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</body>
</html>
Flex wrap 将内容包裹在 display flex parent width 中,缩小子内容以适应 parent 宽度,以便它们适合一行。
flex-wrap: wrap
将内容包装成与自动换行相同的方式,如果内容在父级之外流动div,它将把它们包装到另一行。
这里是 flexbox 的完整指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4,它让您了解所有 flexbox 属性。
已更新 JSFiddle:
https://jsfiddle.net/s479vovz/145/
HTML:
<h1>Animal Collection</h1>
<p>Get a look at all the species!</p>
<div class="outer">
<div style="width:25%;margin-right:1%;">
<div class="box">
<img src="http://www.owlsecurity.com.mx/wp-content/uploads/2018/02/buho.png" class="zoom centerImg">
<div class="ttl">OWL</div>
<div class="desc">
<div class="wrapper"> The owl is a very fascinating species that is nocturnal. It is considered as a predator</div>
</div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://i.pinimg.com/originals/70/a1/58/70a1580630e2233978c0755f7215a3a2.png" class="zoom centerImg">
<div class="ttl">CAT</div>
<div class="desc"><div class="wrapper"> The cat or feline is a descendant of a lion. It can jump as high as 13 feet </div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
<div style="width:23%;margin-right:1%;">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/63/d7/3a/63d73ab34ef22437a2525e0e715f68c8.png" class="zoom centerImg">
<div class="ttl">TOUCAN</div>
<div class="desc"><div class="wrapper"> The Toucan is an exotic bird that comes from Brazil. It eats fruits and vegetables and is considered a herbivore.</div></div>
</div>
</div>
</div>
CSS:
body{
background-color:grey;
}
div {
display: block;
}
.outer {
display: flex;
flex-flow: row wrap;
float:left;
width: 100%;
}
.box {
color: white;
text-align: center;
font-family: 'Courier New';
background-color: skyblue;
/* width: 180px; */
height: 250px;
margin: 10px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out, transform .2s;
}
.box:hover {
background-color: #4aa8ea;
}
.zoom {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
height: 50%;
transition: transform 1s, filter 1s;
margin: 10px;
}
.box:hover .zoom {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 77px;
height: 100px;
padding: 13px;
}
.ttl {
background-color: black;
font-weight: bold;
font-family:monospace;
font-size:20px;
}
.desc {
color: black;
width: 100%;
height: 30%;
box-sizing: border-box;
word-wrap: break-word;
font-size:10px;
padding:10px;
overflow:hidden;
background-color:white;
}
.wrapper {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
}