webentwicklung-frage-antwort-db.com.de

Wenn Sie die Spaltenanzahl verwenden, verschwindet der überlaufende Inhalt bis auf die erste Spalte vollständig. Warum?

Wenn in einem Wrapper column-count verwendet wird und auf die Container im Wrapper border-radius angewendet wird und der Inhalt im Container überläuft, verschwindet der Inhalt vollständig in allen Spalten mit Ausnahme der ersten.

Hier ist mein Beispiel: https://jsfiddle.net/f4nd7tta/
Der rote Halbkreis ist nur in der ersten Spalte sichtbar, warum? 

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}
<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>
csscss3css-multicolumn-layoutcolumn-count
26
Eduárdó

Ich habe ehrlich keine Ahnung, warum dies passiert. Ich schaue in den Dokumenten, ob sie dieses Verhalten angegeben haben, ich möchte überprüfen, ob sie beabsichtigt ist oder ob es sich um einen Fehler handelt. Für jetzt benutze ich 

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

Und es funktioniert ... Fügen Sie also die obigen Eigenschaften in #main_wrap > div hinzu und ich denke, wenn Sie die Herstellerpräfixe ausschließen, ist transform: translateX(0); ausreichend.

Demo

Ok, ich denke es ist ein Fehler: 

Ausgabe 84030 : CSS 3 Spaltenfehler (Überlauf: versteckt wie Funktionalität, wo dies nicht der Fall sein sollte)

Die absolut positionierten Elemente werden abgeschnitten, als ob ein Überlauf : Ausgeblendet auf die Box angewendet wird. Das Anwenden von Überlauf: Visible oder eine andere Regel behebt das Problem jedoch nicht

Ich habe mehr darüber nachgedacht, als ich die erste Lösung vorschlug, bei der ich die Eigenschaften zufällig eingefügt habe, und es funktioniert hat. Es gibt auch eine Möglichkeit, das, was Sie tun, legal zu tun, indem Sie eine clip-Eigenschaft verwenden, und Sie brauchen overflow: hidden; nicht mehr. .

#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}

Demo 2 (Clip Demo)

16
Mr. Alien

Ich habe ziemlich viel Zeit damit verbracht, dieses Problem zu untersuchen und fand den Vorschlag, die CSS-Eigenschaft will-change: transform; zu den Elementen im Spaltenlayout hinzuzufügen. Zum Beispiel:

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>
3
Benjamin Humphrey

Hier finden Sie ein Funktionsbeispiel meiner ANSWER , die ich in Firefox & Chrome getestet habe.

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

Ich habe das in Ihrem Beispiel gezeigte Layout neu erstellt. Möglicherweise müssen Sie jedoch einige Änderungen vornehmen, um das endgültige Layout zu erhalten. Dafür spielen Sie mit den markierten (# ***) Eigenschaften

0
T04435