如何重新排序我的元素 and/or 在图像周围浮动文本？

Question

我得到了以下无法更改的标记。

<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 来重新排序项目，但那时我不能在图像容器上使用浮动。

编辑 2

再澄清一点（抱歉）

页眉 (h3) 必须位于顶部并占宽度的 100%。（只需向下填充图像即可不换行）。
图像将占宽度的 45%，但高度会根据不同的用例而变化。
描述的内容将是 x 的 p 个不同内容的标签。

Answer 1

只需在 image 容器和一些 margin-top 上使用 float 属性即可轻松实现此目的。我不会逐行查看我已更改的 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>

Answer 2

使用了一些 CSS hack 来实现 Flexbox 中的第一个布局。

Flexbox 不允许在图像周围环绕文本，因为它有自己的行或列。
提供父容器 position: relative 和子项图像 position: absolute 并与 top 和 left 值对齐。
您可以调整从第2段到最后一段的宽度，以占据100%的宽度。

.container {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  flex-flow: row wrap;
  max-width: 700px;
  padding: 15px;
  position: relative;
  text-align: left;
}
.container > .image {
  max-width: 40%;
  min-height: 100px;
  min-width: 40%;
  order: 4;
  position: absolute;
  right: 0;
  top: 100px;
}
.container > .specials-info {
  order: 2;
}
.container > .description {
  order: 3;
  text-align: left;
}
.container > .description > * {
  padding-right: 15px;
}
.container > .description > p {
  margin-bottom: 8px;
}
.container > h3 {
  font-size: 20px;
  font-weight: 600;
  order: 1;
  text-align: left;
  width: 100%;
}
.container > hr {
  display: none;
}
.container > .image > img {
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
}
.description > p:not(:first-child) {
  width: 100%;
}
.description > p:first-child {
  max-width: 60%;
}

<div class="container">
  <div class="image">
    <img src="http://placehold.it/200x200" />
  </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>

Answer 3

将此 margin-top 用于 snippet1

中的 .image class

.container > .image {
    max-width: 40%;
    min-width: 40%;
    min-height: 100px;
    float:right;
    margin-top:72px;
}

如何重新排序我的元素 and/or 在图像周围浮动文本？

How to reorder my elements and/or float text around the image?

html

css

css-float

flexbox