我得到了以下无法更改的标记。
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
所以目标是让 html 按照以下代码段呈现:
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
}
.container > .description {
max-width: 100%;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}<div class="container">
<h3>Some Header the is in the wrong place</h3>
<div class="image">
<img src="some image"/>
</div>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>请注意，在上面的片段中，我已经移动了 <h3>标记到容器内的顶部，一切都很好，花花公子。但是我无法在我的场景中改变这一点。
我可以使用 jQuery/JavaScript 来做到这一点，但我真的不想，并且只想使用 CSS。
我曾尝试使用 flexbox 方法让它重新排序，但我无法让文本环绕在图像底部，例如
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
order: 4;
}
.container > .specials-info {
order: 2;
}
.container > .description {
max-width: 60%;
text-align: left;
order: 3;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
order: 1;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>总而言之，有没有一种方法可以在不更改原始 HTML 且不使用 JavaScript 的情况下实现代码段 1？
编辑 1
为了澄清一点，下图中左边的是代码段 1。这就是我想要结束的(但标记不同，因为 <h3> 标签更高)。右边是代码段 2，在不编辑标记(我不能这样做)/使用 JavaScript(我可以这样做但宁愿只使用 CSS)的情况下尽可能接近。
请注意，我使用了 flexbox 来重新排序元素，但此时我不能在图像容器上使用 float 。
编辑2
再澄清一点(抱歉)
- 标题 (h3) 必须位于顶部并占宽度的 100%。 (只需向下填充图像即可不换行)。
- 图像将占宽度的 45%，但高度会根据不同的用例而变化。
- 描述的内容将是 x 个 p 标签，内容各不相同。
最佳答案
只需使用 image 容器上的 float 属性和一些 margin-top 即可轻松实现此目的。我不会逐行介绍我更改了哪些 CSS 属性，但这里有一个 JSFiddle，它不会更改您的 HTML 并实现您想要的布局。与使用 flex 相比，它还有一个额外的好处，即 CSS 行数要少得多。
注意:由于我不知道您的图片实际尺寸，我根据您的图片外观选择了一个明确的尺寸。
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container .image {
margin-top: 70px;
}
.container > .image {
float: right;
width: 300px; /* just an example size */
height: 150px; /* just an example size */
background: grey; /* This is just to show you where the image would be */
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
font-weight: 600;
font-size: 20px;
white-space: nowrap;
}<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>关于html - 如何重新排列我的元素和/或图像周围的 float 文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32323695/