Question

我试图在html中使两个分区的宽度相等。当它们装入一排时，它们应保持相同的宽度，但当它们彼此对齐时，它们应保持相同的宽度。

示例如下：sample

当两个盒子装成一排时，它看起来不错：

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

但如果它们浮动，看起来我的第二个div小于第一个

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">
	<div class="container-inner">
		<ul>
			<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>
			<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>
		</ul>
	</div>
</div>  
    </body>
</html>

编辑时间：2016-06-03 16:03 GMT + 2 ：我的代码示例的唯一问题是，当它们像第二张图片一样堆叠时，橙色框似乎比绿色框小一点。

我无法找到一种方法来使两个盒子的大小相等，比如15em宽和8em高。

Answer 1

我删除了这一行

.container-inner li div {display：table-row;}

并更新了这个：

.container-inner li {display：inline-block; line-height：normal; float：left; }

<!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">
	<div class="container-inner">
		<ul>
			<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>
			<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>
		</ul>
	</div>
</div>  
    </body>
</html>

Answer 2

我的样式表现在看起来像那样：

＆＃13;

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

＆＃13;

Answer 3

你好使用显示内联块来居中2个具有相同宽度的div我使它成为父div的50％你可以设置你想要的任何尺寸并将垂直对齐设置为顶部

<!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">
	<div class="container-inner">
		<ul>
			<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>
			<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>
		</ul>
	</div>
</div>  
    </body>
</html>

相同尺寸的浮动分区在彼此对齐时是不同的大小

3 个答案: