Question

我正试图以这种方式布置我的网站：

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

这可以通过表格轻松完成，但我正在努力使其响应，以便一旦网站水平太小，textDiv将不再浮动到imageDiv旁边，然后将落在下面。

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

一旦div不再相互浮动，它们相同的大小将不再有意义，因此不再需要功能。

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

Answer 1

您可以使用以下方式实现此目的：

使用填充进行绝对定位
Flex布局

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

这可以通过表格轻松完成，但我正在努力做到这一点   响应，以便一旦网站水平太小，那   textDiv将不再浮动到imageDiv旁边，然后会掉落   下方。

如果您可以轻松地使用表格布局，那么只需使用表格布局。通过添加适当的媒体查询并更改布局来使其响应。表格布局是指display: table（不是table元素）。

它将如此简单：

#parent { display: table; }
#parent > div { display: table-cell; width: 50%; vertical-align: middle; }

请注意在图像上指定max-width以使其保持在界限范围内：

#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }

vertical-align和text-align可帮助您控制图像的对齐方式。

我遇到的问题是div会占用所需的内容空间。我如何确保这两者当它们彼此相邻浮动时保持相同的大小？

使用display: table-cell修复宽度可以解决这个问题。

一旦div不再彼此浮动，它们就会相同大小将不再有意义，因此功能将不再是必需的。

只需为您需要的断点添加媒体查询，然后只需将display重置为block：

@media screen and (max-width:480px) {
    #parent { display: block; }
    #parent > div { display: block; width: auto; }
}

<强>段：

* { box-sizing: border-box; padding: 0; margin: 0; }
#parent { border: 1px solid #00f; width: 75%; margin: 0 auto; display: table; }
#parent > div { 
    border: 1px solid #f00; 
    display: table-cell; width: 50%; 
    vertical-align: middle;
}
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }

@media screen and (max-width:480px) {
    #parent { display: block; }
    #parent > div { display: block; width: auto; }
}

<div id="parent">
    <div id="imgWrap">
        <img src="//lorempixel.com/240/120" />
    </div>
    <div id="contentWrap">
        <p>
            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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. 
        </p>
    </div>
</div>

小提琴：http://jsfiddle.net/abhitalks/29vLq11o/3/

Answer 3

我不确定我是否完全理解您的问题，但您可以将每个的宽度设置为50％，然后将它们向左浮动。他们将并排保持尺寸，直到屏幕变小：

.image {
    float:left;
    width:50%;
}
.image img {
    display:block;
    max-width:100%;
}
.text {
    float:left;
    width:50%;
}

http://jsfiddle.net/rhn76m5z/3/

不使用表格，将divs彼此相邻放大？

3 个答案: