如何重新排序我的元素和/或在图像周围浮动文字？

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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，在上面的代码片段中，我已将<h3>标记移动到容器内的顶部，一切都很好，花花公子。但是我无法在我的场景中改变这一点。 我可以使用jQuery / JavaScript来完成它，但我真的不想这样做，并且只想使用CSS。

我尝试过使用flexbox方法让它重新排序但是我无法让文字环绕图像的底部，例如。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

总之，有没有办法实现Snippet 1而不使用原始HTML而不使用JavaScript？

修改1

只是为了澄清左下图中的一点是Snippet 1.这是我想要的结果（但标记的不同之处在于<h3>标签更高）。在右边是Snippet 2，尽可能接近我没有编辑标记（我不能做）/使用JavaScript（我可以做，但宁愿只使用CSS）。

请注意，我使用了flexbox对项目重新排序，但此时我无法在图像容器上使用浮动。

修改2

更多澄清（道歉）

• 标题（h3）必须位于顶部并占据宽度的100％。 （只需填充图像即可完成包装）。
• 图像将是宽度的45％，但会根据不同的使用情况而改变高度。
• 描述内容将是包含不同内容的p标签的x no。

Answer 1

只需使用float容器上的image属性和一些margin-top即可轻松实现此目的。我不会逐步了解我已经改变的CSS属性，但这里有一个JSFiddle，它不会改变你的HTML并实现你想要的布局。与使用flex相比，它具有更少的CSS行的附加好处。

注意：由于我不知道您的图片实际大小，我根据您的图片选择了明确的尺寸。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

1. Flexbox不允许在图像周围包装文本，因为它采用自己的行或列。
2. 授予父容器position: relative和子项目图片position: absolute，并与top和left值保持一致。
3. 您可以将第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

将此progressHandler用于snippet1

中的margin-top课程

.image