2017-05-22 67 views
-2

我想包裝兩個部分並將它們並排包裝,以使它們看起來像這樣。使用HTML和CSS在網頁中將文本並排包裝

wrap text side by side

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

+0

請更新我給你帶個CSS代碼的片段,你試過 – mplungjan

回答

4

看一看這個例子

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

+0

非常好:)... – mplungjan

0

不是有要將插入文本放置在正文文本的中間,可以將零寬度框浮動到右側以向下移動內嵌文本。然後可以先插入插入文本,然後使用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>