はなぜオーバーフローさ：隠されたが、私のdivの上で動作していませんか？

あなたはC1のDIVにmargin-leftを与えることをしようとすると、それが移動し、オーバーフローが隠されています。しかし、C230 divにmargin-leftを与えると、右に向かって動きますが、オーバーフローは隠されず、次の行に移動します（振る舞いはinline-block）。はなぜオーバーフローさ：隠されたが、私のdivの上で動作していませんか？

なぜC2 divで動作しないのですか？この問題を解決する方法はありますか？

（基本的には、C1とC2のdivを一緒に配置したいと思います。幅を広げたり、余白を与えるとオーバーフローが隠されるはずです。

.c1 { 
 
    width: 220px; 
 
    height: 200px; 
 
    background-color: #666666; 
 
    display: inline-block; 
 
} 
 
.c2 { 
 
    width: 200px; 
 
    height: 220px; 
 
    background-color: #CCCCCC; 
 
    display: inline-block; 
 
} 
 
.c3 { 
 
    width: 180px; 
 
    height: 210px; 
 
    background-color: #333333; 
 
    display: block; 
 
} 
 
.wrapper { 
 
    background-color: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
}

<div class="wrapper"> 
 
    <div class="c1">C1</div> 
 
    <div class="c2">C2</div> 
 
    <div class="c3">C3</div> 
 
</div>

出典

2016-01-30 Vikas Kumar

をコンテナ（.wrapper）にwhite-space: nowrapを追加します。ここでは

は私がしようとしているものです。

white-space

white-spaceプロパティは空白内部要素の処理方法を説明するために使用されます。
通常用として
nowrap

折りたたみ空白が、テキスト内の改行（テキストラップ）を抑制します。

_ソース：

Understanding the wrapping behavior of inline-block elements with overflow:hidden

Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

：しかしC1は、これらの記事を見ていない理由を、white-space: normal、C2ラップとhttps://developer.mozilla.org/en-US/docs/Web/CSS/white-space

を理解します

ここanswer by @BoltClockからの抜粋です：

容器にoverflowの値がか又は が場合その内容オーバーフロー影響しません。オーバーフローが発生したときにのみ、その内容がどのようにレンダリングされるか、それと変わります。

したがって、インラインブロックが実際にコンテナをオーバーフローさせるように強制する必要があります。インラインブロックはブロックコンテナボックスと同じ剛性の物理的構造を有しているので、与えられたラインにのみインラインレベルボックスだとき

は、それが「ばらばら」にインラインブロック又はラップのために不可能ですボックス。

出典

2016-01-30 12:24:00

画面のプロパティを使用しないでください...例えば

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="jquery-2.2.0.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style> 
.c1{ 
    width: 220px; 
    height: 200px; 
    background-color:#666666; 
    float:left; 
    margin-left:10px; 
    overflow:hidden; 

    } 
.c2{ 
    width: 200px; 
    height: 220px; 
    background-color:#CCCCCC; 
float:left; 
    margin-left:10px; 
    overflow:hidden; 
    } 
.c3{ 
    width: 180px; 
    height: 210px; 
    background-color: #333333; 
    float:left; 
    margin-left:10px; 
    overflow:hidden; 
    } 
.wrapper{ 
    background-color: red; 
    width: 500px; 
    height: 500px; 
    display: inline-block; 
    overflow: hidden; 
    } 
</style> 
</head> 

<body> 
<div class="wrapper"> 
<div class="c1">C1</div> 
<div class="c2">C2</div> 
<div class="c3">C3</div> 
</div> 
</body> 
</html>

出典

2016-01-30 12:27:10

をフロートプロパティを使用してスニペットをしてください。 –

はなぜオーバーフローさ：隠されたが、私のdivの上で動作していませんか？

答えて

関連する問題