27

ラッパーで使用column-countし、ラッパー内のコンテナーがborder-radius適用され、コンテナー内のコンテンツがオーバーフローしている場合、最初の列を除くすべての列でコンテンツが完全に消えます。

これが私の例です: https://jsfiddle.net/f4nd7tta/
赤い半円は最初の列にしか見えません。なぜですか?

#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>

4

4 に答える 4

20

正直なところ、なぜこれが起こるのかわかりません。ドキュメントがこの動作を指定しているかどうかを調べています。意図的なものかバグかを確認したいと思います。今のところ私は使用しています

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

そしてそれは機能します...したがって、上記のプロパティを追加してください。#main_wrap > divベンダープレフィックスを除外している場合transform: translateX(0);は十分だと思います。

デモ

わかりました、それはバグだと思います:

問題 84030 : CSS 3 列のバグ (オーバーフロー: 本来あるべきでない機能が隠されている)

絶対配置された要素は、オーバーフローがあるかのようにクリップされます。非表示がボックスに適用されます。ただし、overflow: visible またはその他のルールを適用しても問題は解決しません。

プロパティをランダムに挿入し、それが機能する最初のソリューションを提案したので、これについてもっと考えました。clipプロパティを使用して、行っていることを合法的に実行でき、もう必要ない方法もありoverflow: hidden;ます..

#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);
}

デモ 2 (クリップデモ)

于 2015-04-14T10:09:12.010 に答える
-2

私のANSWERの実例を見つけてください。Firefox と Chrome でテストしました。

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

例に示されているレイアウトを再作成しましたが、最終的なレイアウトを得るにはいくつかの変更が必要になる場合があります。マークされた（#***）プロパティで遊ぶため

于 2015-11-04T03:13:19.390 に答える