floatを使用せずにDIVを行に整列させる -- html フィールド と css フィールド 関連 問題

Aligning divs in a row without using float












2
vote

問題

日本語

float を使用せずに、 .container を使用せずに4つのDIVを使用して2x2グリッド構造を作成しようとしています。

<事前> <コード> [ ][ ] [ ][ ]

しかし私がそうしようとしているとき、代わりにこれを経験しています:

<事前> <コード> [ ] [ ] [ ] [ ]

<コード> .box ESは、境界線や余白のない50%の高さと幅である必要があります。 これは私がこれを試して実現するために使っているコードです:

HTML

<事前> <コード> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

CSS

<事前> <コード> .container{ width:600px; height:700px; position:relative; } .box{ display:inline-block; width:50%; height:50%; background:red; }

これは jsfiddle です。

英語

I am trying to create a 2x2 grid structure using 4 divs wrapped inside a .container without using float like so:

[ ][ ] [ ][ ] 

However when I try to do so I am instead experiencing this:

[ ] [ ] [ ] [ ] 

The .boxes need to be 50% height and width with no border or margins. This is the code I am using to try and achieve this:

HTML

<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

CSS

.container{   width:600px;   height:700px;   position:relative; } .box{   display:inline-block;   width:50%;   height:50%;   background:red; } 

Here is the JSfiddle to demonstrate.

</div
     

回答リスト

3
 
vote
vote
ベストアンサー
 

HTMLのような変更を加える:

<事前> <コード> <div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div> </div>

または

<事前> <コード> <div class="container"> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div>

<コード> display:inline-block

を使用しているボックスの間のスペースを取り外します。

働くフィドル

詳細

 

Make change in your html like:

<div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div> </div> 

Or

<div class="container"> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div> 

Remove space between box div as you are using display:inline-block

Working Fiddle

More info

</div
 
 
   
   
2
 
vote

おそらくCSS3の flex-box あなたが持っている問題を解決するアプローチ。

あなたの例を使って:

<事前> <コード> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> </div>

とCSS:

<事前> <コード> .container { display: flex; flex-wrap: wrap; height: 50%; min-height: 250px; // for example, to give a minimum height } .box { flex: 1 1 50%; background: green; border-top: solid 1px #000; } .box:nth-child(odd) { background: red; flex: 0 0 50%; }

他の解決策よりも掃除機で簡単に。 jsfiddle リンクここにリンク

 

You should probably look into using css3's flex-box approach, which will solve the issues you're having.

Using your example:

<div class="container">   <div class="box">Box 1</div>   <div class="box">Box 2</div>   <div class="box">Box 3</div>   <div class="box">Box 4</div> </div> 

And the css:

.container {   display: flex;   flex-wrap: wrap;   height: 50%;   min-height: 250px; // for example, to give a minimum height } .box {   flex: 1 1 50%;   background: green;   border-top: solid 1px #000; } .box:nth-child(odd) {   background: red;   flex: 0 0 50%; } 

Much cleaner and easier than other solutions. jsfiddle link here.

</div
 
 
 
 
1
 
vote

ホワイトスペースを削除するには、コンテナにfont-size:0を設定する必要があります。コード内の空白を削除します。

これについてもっと知らない場合は、この記事を読んでください。

https://css-tricks.com/gighting. - 空間間 - inline-block-element /

 <コード> .container{    width:600px;    height:700px;    position:relative;    font-size: 0;  }  .box{    display:inline-block;    width:50%;    height:50%;    background:red;  }  
 <コード> <div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  </div>  

 

You need to set font-size:0 on your container to remove white-space. Or remove white-space in your code.

If you wan't to know more about this read this article

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

.container{    width:600px;    height:700px;    position:relative;    font-size: 0;  }  .box{    display:inline-block;    width:50%;    height:50%;    background:red;  }
<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  </div>
</div
 
 
 
 
1
 
vote

各ボックスの間に空白があるため、この問題が発生する可能性があります。この

<事前> <コード> #import "SimpleTestClassWithOneMethod.h" // #import "MyClass.h" // #import "MyOtherClass.h" // #import "SomeThirdPartyModule.h" 0

私はそれをやろうとしていませんが、空白を取り除くべきです。

 

This problem may happen because you have whitespaces between each box, try this

<div class="container"> <div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div> </div> 

I haven't tried to do it but it should get rid of the whitespaces.

</div
 
 
1
 
vote

 <コード> .container{    width:600px;    height:700px;    position:relative;        display:flex;    flex-direction:column;  }    .row{   display:flex;   flex-direction:row;   height:100%;   width:100%;  }  .box{    background-color:red;    height:50%;    width:50%;    border:1px solid #333;  }  
 <コード> <div class="container">    <div class="row">  <div class="box"></div>  <div class="box"></div>  </div>    <div class="row">  <div class="box"></div>  <div class="box"></div>  </div>      </div>  

flex を使って、これらの種類のものを簡単に柔軟に処理することができます。
Flex css-tricks.com
問題を解決するために、 fiddle を確認してください。

この FIDDLE をチェックしてください。

 

.container{    width:600px;    height:700px;    position:relative;        display:flex;    flex-direction:column;  }    .row{   display:flex;   flex-direction:row;   height:100%;   width:100%;  }  .box{    background-color:red;    height:50%;    width:50%;    border:1px solid #333;  }
<div class="container">    <div class="row">  <div class="box"></div>  <div class="box"></div>  </div>    <div class="row">  <div class="box"></div>  <div class="box"></div>  </div>      </div>

Using flex , you can flexibly handle all these kind of things with ease.
More info on flex css-tricks.com
Check the fiddle for the solution to your problem.
And
Check this fiddle for more responsive design .

</div
 
 

関連する質問

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有