HTML格式的文本

我對HTML相當陌生，所以我不知道如何去找到答案，如何做到這一點，但基本上我試圖將一定數量的文本和縮進，並填寫背景顏色只有一小部分（不是所有的跨網頁的寬度的方式）像這樣：boxing HTML格式的文本

2016-04-07 Sherman Herman

可以使用'背景color'和'margin'？ –

是的，我可以使用關於邊距的背景顏色..idk。我想是這樣。我知道如何改變一個部分的背景顏色，但我不知道如何限制它不穿過整個頁面。就像它應該只覆蓋文本區域（很像微軟文本中的文本框功能） –

你可以使用'class'作爲它..所以所有的盒子都包含相同的'css格式'。 –

你可以做這樣的事情：

//HTML 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
</div> 

//CSS 
.content {padding: 20px; background-color: #333} 
.content p {background-color: #eee; margin: 0 0 20px 0; padding: 10px}

的jsfiddle這裏：https://jsfiddle.net/qszx5uwh/

來源

2016-04-07 05:52:24 PavKR

<div class="main_container"> 
    <div class="box1">text for box 1</div> 
    <div class="box2">text for box 1</div> 
    <div class="box3">text for box 1</div> 
</div> <!--main_container ends here--> 

<style type="text/css"> 
.main_container{float:left;width:500px;} 
.box1{float:left;width:500px;background:#cc0000;} 
.box2{float:left;width:500px;background:#cccccc;} 
.box3{float:left;width:500px;background:#f1f1f1;} 
</style>

來源

2016-04-07 05:48:01

使用SO代碼編輯器，以便我們可以運行該代碼段並查看輸出。 – Roy

所有你需要的是文本與文本包裝包裹設置填充和背景顏色。

.text-container{ 
 
    background-color: yellow; 
 
    padding-right: 50px; 
 
}

<div> 
 
    <div class="text-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p> 
 
    </div> 
 
    <div class="text-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p> 
 
    </div> 
 
    <div class="text-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p> 
 
    </div> 
 
</div>

來源

2016-04-07 05:51:59

HTML格式的文本

回答

相關問題