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

Question

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

<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 
 
\t \t 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 
 
\t \t </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 
 
\t \t 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>

Answer 1

看一看这个例子

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

<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"> 
 
\t 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>

Answer 2

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

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

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