html - 在不使用表格的情况下保持 div 彼此相邻且大小相同？

Question

我正在尝试以这种方式布置我的网站:

图像 div 将包含可变大小的图像，图像应垂直和水平对齐。文本 div 将包含大量文本。

这可以很容易地用表格完成，但我试图让它具有响应性，以便一旦网站水平太小，textDiv 将不再 float 在 imageDiv 旁边，然后会落在下面。

我遇到的问题是 div 只会占用其内容所需的空间。如何确保这两个在彼此相邻 float 时保持相同的大小？

一旦 div 不再彼此相邻 float ，它们的相同大小就不再有意义，因此不再需要功能。

我发现 Flex 是一种可能的解决方案，但它没有得到很好的支持。我应该提到它们的宽度将设置为 parentDivs 宽度的百分比。

Answer 1

您可以使用:

1. 带填充的绝对定位
2. 灵活布局

.parentDiv {border: 4px solid black;}
.imageDiv {border: 4px solid tomato;}
.textDiv {border: 4px solid skyblue;}
.imageDiv img { max-width: 100%; }
@media (min-width: 768px) {
	#first .imageDiv { width: 50%; max-width: 50%; box-sizing: border-box; }
	#first .parentDiv { position: relative; min-height: 150px; }
	#first .parentDiv > div { padding-left: 50%; }
	#first .imageDiv { position: absolute; top: 0; left: 0; }
	
	#second .parentDiv { display: flex; }
	#second .imageDiv, #second .textDiv { flex-basis: 50%; }
}

<h2>Using absolute positioning and padding</h2>
<div id="first">
<div class="parentDiv"><div>
	<div class="imageDiv">
		<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
	</div>
	<div class="textDiv">
		

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.

Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.

Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.

Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.

Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus. 
	</div>
</div></div>
</div>
<h2>Using flex layout</h2>
<p><b>Firefox specific problem:</b> the width of the image interfere with <code>flex-basis</code> of <code>imageDiv</code>.
<br>Give the width of the image in percentage.</p>
<div id="second">
<div class="parentDiv">
	<div class="imageDiv">
		<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
	</div>
	<div class="textDiv">
		

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.

Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.

Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.

Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.

Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus. 
	</div>
</div>
</div>