Float links funktioniert nicht wie erwartet

Question

Ich habe 4 Divs, die Anzeige haben: Flex-Reihe, die nach links schwebt. Ich versuche, dass es reagiert, wenn die Bildschirmgröße verkleinert wird. Die Blöcke bewegen sich jedoch nicht. Die .box soll brechen, wenn sie den Rand berührt. Hier ist der Code:

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>

Was mache ich hier falsch? Bitte helfen Sie, hier ist die Geige: Geige

LÖSUNG: Hinzufügen von Flex-Wrap: Wrap; an die .outer-Klasse behebt das Problem

html css responsive-design flexbox css-float

0

Squish 17 Apr. 2018 im 14:53

Answer 1

Versuche dies:

.outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

2

HTML CSS Hupp Technologies 17 Apr. 2018 im 11:57

Answer 2

Beim Flex-Wrap wird der Inhalt in die übergeordnete Flexbreite des Displays eingeschlossen, wodurch die des Kindes verkleinert wird, um sie an die übergeordnete Breite anzupassen, sodass sie in eine Zeile passen.

flex-wrap: wrap

Der Inhalt wird genauso umbrochen wie der Zeilenumbruch. Wenn der Inhalt außerhalb des übergeordneten Bereichs fließt, werden sie in eine andere Zeile eingeschlossen.

Hier finden Sie die vollständige Anleitung zur Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4 gibt Ihnen einen Überblick über alle Flexbox-Eigenschaften.

2

Chilll007 17 Apr. 2018 im 12:03

Answer 3

Ändern Sie flex-direction:row in 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>

1

aMJay 17 Apr. 2018 im 11:59

Answer 4

JSFiddle aktualisiert:

  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%;
}

0

Ryan McDonough 17 Apr. 2018 im 14:16

Float links funktioniert nicht wie erwartet

4 Antworten

Verwandte Fragen

Neue Fragen

html