使用HTML和CSS在网页中并排包装文本

Question

我想把两个部分包起来并将它们并排包裹起来，使它们看起来像这样。

＆＃13;

＆＃13;

<div class="row">


  <span class="pull-left"><strong>5 Dolor et’s face it – no matter how excited you are about a new project or priority in your life, there will always be days when your
		   motivation lags. Days when – despite all the progress you’ve made in the past – it just sounds easier to sit on the couch playing video
		   </strong></span>

  <span>Let’s face it – no matter how excited you are about a new project or priority in your life, there will always be days when your motivation lags. Days when – despite all
		  the progress you’ve made in the past – it just sounds easier to sit on the couch playing video games than to buckle down and crank out the work needed to meet your goals.
          If you don't like your destiny, don't accept it.</span>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看一下这个例子

＆＃13;

＆＃13;

 .insert { float:right;width:50%; padding:30px;}

＆＃13;

<p>
CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and
<span class="insert">
	CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
</span>
SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不必将插入文本放在正文文本的中间，而是可以将零宽度框浮动到右侧以向下移动插入文本。然后，您可以先插入插入文本，然后使用float和clear将其放在正确的位置。

＆＃13;

＆＃13;

.row::before{
  content:'';
  float:right;
  height:100px;
}
.inset {
  float:right;
  clear:right;
  width:60%;
  font-style:italic;
  margin-left:10px;
}

＆＃13;

<div class="row">

  <div class="inset"><strong>5 Dolor et’s face it – no matter how excited you 
are about a new project or priority in your life, there will always be days when 
your motivation lags. Days when – despite all the progress you’ve made in the 
past – it just sounds easier to sit on the couch playing video</strong></div>

  <div class="main"><p>Let’s face it – no matter how excited you are about a
new project or priority in your life, there will always be days when your 
motivation lags. Days when – despite all the progress you’ve made in the past – 
it just sounds easier to sit on the couch playing video games than to buckle down 
and crank out the work needed to meet your goals. If you don't like your destiny, 
don't accept it.</p><p>Let’s face it – no matter how excited you are about a new 
project or priority in your life, there will always be days when your motivation 
lags. Days when – despite all the progress you’ve made in the past – it just 
sounds easier to sit on the couch playing video games than to buckle down and 
crank out the work needed to meet your goals. If you don't like your destiny, 
don't accept it.</p></div>

</div>

＆＃13;

＆＃13;

＆＃13;