同じサイズのフローティングディビジョンは、お互いの上に並べるとサイズが異なります

私は幅が同じhtmlで2つのディビジョンを作ろうとしています。 1つの行に収まるときだけでなく、互いの下に整列しているときにも、同じ幅にする必要があります。同じサイズのフローティングディビジョンは、お互いの上に並べるとサイズが異なります

例はここにある：

a busy cat http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_row.png

を彼らが浮く場合は私の第二のdivがより小さくなるように、それはそうです：sample

2つのボックスが1行に収まるとき、それはよさそうです

two muppets http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_column.png

最初、これは完全なコードですページ：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     <style> 
 
      
 
      .container {margin:auto;} 
 
      .container-inner {position:relative;left:-50%;float:right} 
 
      .container-inner ul {position:relative;left:50%} 
 
      .container-inner li {display:inline;line-height:normal; } 
 
      .container-inner li div {display: table-row;} 
 
      .container-inner a,.container-inner a:visited {color:#525252;text-decoration:none} 
 
      .container-inner a:hover {text-decoration:underline} 
 
      .container-inner li:last-child {border-right:none}   
 
      .FarbeNT {background: rgba(255,128,0,0.5)} 
 
      .FarbeAT {background: rgba(0,255,0,0.5)} 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
\t <div class="container-inner"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
       <div class="FarbeAT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15);"> 
 
         <a href="http://0_AudioBibel_NT_zip.zip">Das Neue Testament</a> 
 
         <a href="http://0_AudioBibel_NT_zip.zip"><img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/></a> 
 
        </div> 
 
        <div style=""> 
 
         <p><a href="?Buch=evangelien_apostel">Evangelien &amp; Apostel</a></p> 
 
         <p><a href="?Buch=briefe">Briefe</a></p> 
 
         <p><a href="?Buch=offenbarung">Offenbarung</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t \t <li style="display: inline"> 
 
       <div class="FarbeNT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15)"> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei.">Das Alte Testament</a> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei."><img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/></a> 
 
        </div> 
 
        <div style=""> 
 
         <p><a href="?Buch=geschichte">Ge&shy;schichts&shy;büc&shy;her</a></p> 
 
         <p><a href="?Buch=poesie">Poetische Bücher</a></p> 
 
         <p><a href="?Buch=prophetie">Prophetische Bücher</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 
    </body> 
 
</html>

編集で2016年6月3日16時03分GMT + 2は：私のコードサンプルの唯一の問題は、オレンジ色のボックスがあるように思われていること2枚目の写真のように積み重ねると、緑色のものより少し小さくなります。

両方のボックスのサイズを同じにする方法、たとえば、15emの幅と8emの高さを見つけることができません。

出典

2016-07-03 Wolfgang Roth

トップに垂直整列を設定しますか？ –

私はこのライン

.container-内のLi DIV除去

{表示：表行;}

この1つの更新された：

.container-内部のLiを{表示：インラインブロック;行高さ：通常;浮動小数点：左; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     <style> 
 
      
 
      .container {margin:auto;} 
 
      .container-inner {position:relative;left:-50%;float:right} 
 
      .container-inner ul {position:relative;left:50%} 
 
      .container-inner li {display:inline-block;line-height:normal;float:left; } 
 
      .container-inner a,.container-inner a:visited {color:#525252;text-decoration:none} 
 
      .container-inner a:hover {text-decoration:underline} 
 
      .container-inner li:last-child {border-right:none}   
 
      .FarbeNT {background: rgba(255,128,0,0.5)} 
 
      .FarbeAT {background: rgba(0,255,0,0.5)} 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
\t <div class="container-inner"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
       <div class="FarbeAT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15);"> 
 
         <a href="http://0_AudioBibel_NT_zip.zip">Das Neue Testament</a> 
 
         <a href="http://0_AudioBibel_NT_zip.zip"><img alt="0_AudioBibel_NT_zip.zip" src="assets/zip.png"/></a> 
 
        </div> 
 
        <div style=""> 
 
         <p><a href="?Buch=evangelien_apostel">Evangelien &amp; Apostel</a></p> 
 
         <p><a href="?Buch=briefe">Briefe</a></p> 
 
         <p><a href="?Buch=offenbarung">Offenbarung</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t \t <li style="display: inline"> 
 
       <div class="FarbeNT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15)"> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei.">Das Alte Testament</a> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei."><img alt="0_AudioBibel_AT_zip.zip" src="assets/zip.png"/></a> 
 
        </div> 
 
        <div style=""> 
 
         <p><a href="?Buch=geschichte">Ge&shy;schichts&shy;büc&shy;her</a></p> 
 
         <p><a href="?Buch=poesie">Poetische Bücher</a></p> 
 
         <p><a href="?Buch=prophetie">Prophetische Bücher</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 
    </body> 
 
</html>

出典

2016-07-03 11:37:00

こんにちは@Shlomi Haver、これは予想される答えではありません。両方に十分な余裕がある場合は、ボックスを左から右に浮かべてください。部屋が小さすぎると、上から下に浮かぶことがあります。彼らは私のコードでそうしました。しかし、2枚目の画像を見ると、オレンジ色のボックスが緑色のボックスより少し小さいことがわかります。しかし、私のコードでは、幅はまったく設定されていません。 –

@WolfgangRoth今見て、これはあなたが望んだものだと思います。 –

はい、私はそれが欲しかったようです。私は答えとして更新されたCSSを追加します。 –

私のスタイルシートは、そのようになりましたになります。

.container 
 
{ 
 
    margin:auto; 
 
    
 
} 
 
.container-inner 
 
{ 
 
    position:relative; 
 
    left:-50%; 
 
    float:right 
 
} 
 
.container-inner ul 
 
{ 
 
    position:relative; 
 
    left:50% 
 
} 
 
.container-inner li 
 
{ 
 
    display:inline-block; 
 
    line-height:normal; 
 
    float:left; 
 
    margin-right: 1em; 
 
} 
 
.container-inner a,.container-inner a:visited 
 
{ 
 
    color:#525252;text-decoration:none 
 
} 
 
.container-inner a:hover 
 
{ 
 
    text-decoration:underline 
 
} 
 
.container-inner li:last-child 
 
{ 
 
    border-right:none; 
 
}

出典

2016-07-03 12:31:30

ハロー用表示インラインブロックを同じ幅で2つのdivをセンタリングするためIとにかくそれを親のdivの50％にするca ca N uがしたい任意のサイズを設定するので、あなたがたときにフロートの両方にも同じ幅であることを望む

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     <style> 
 
      
 
      .container {margin:auto;} 
 
      .container-inner ul {font-size: 0; padding: 0; text-align:center; } 
 
      .container-inner li { 
 
       display:inline-block; 
 
       font-size: 13px; 
 
       line-height:normal; 
 
       text-align: left; 
 
       width: 50%; 
 
       vertical-align: top; 
 
      } 
 

 
      .container-inner a,.container-inner a:visited {color:#525252;text-decoration:none} 
 
      .container-inner a:hover {text-decoration:underline} 
 
      .container-inner li:last-child {border-right:none}   
 
      .FarbeNT {background: rgba(255,128,0,0.5)} 
 
      .FarbeAT {background: rgba(0,255,0,0.5)} 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
\t <div class="container-inner"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
       <div class="FarbeAT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15);"> 
 
         <a href="http://0_AudioBibel_NT_zip.zip">Das Neue Testament</a> 
 
         <a href="http://0_AudioBibel_NT_zip.zip"><img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/></a> 
 
        </div> 
 
        <div style=""> 
 
         <p><a href="?Buch=evangelien_apostel">Evangelien &amp; Apostel</a></p> 
 
         <p><a href="?Buch=briefe">Briefe</a></p> 
 
         <p><a href="?Buch=offenbarung">Offenbarung</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t \t <li> 
 
       <div class="FarbeNT"> 
 
        <div style="background-color: rgba(0,0,0, 0.15)"> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei.">Das Alte Testament</a> 
 
         <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei."><img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/></a> 
 
        </div> 
 
        <div> 
 
         <p><a href="?Buch=geschichte">Ge&shy;schichts&shy;büc&shy;her</a></p> 
 
         <p><a href="?Buch=poesie">Poetische Bücher</a></p> 
 
         <p><a href="?Buch=prophetie">Prophetische Bücher</a></p> 
 
        </div> 
 
       </div> 
 
      </li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 
    </body> 
 
</html>

出典

2016-07-03 13:46:27

申し訳ありませんが、これはそれが私がそうするべきであるようにすべてで動作しません。 –

同じサイズのフローティングディビジョンは、お互いの上に並べるとサイズが異なります

答えて

関連する問題