我怎樣才能達到這個佈局的CSS

您好，我知道這是一個愚蠢的問題，但我找不到這種情況下的解決方案，我的CSS技巧不是很好:(。我怎樣才能達到這個佈局的CSS

如何能夠做到佈局。下面文本應該在包裝容器的結束（DIV，跨度，等等）

---- -------------------------- 
|URL:|thissdfsisalongurasdsdfrea| 
----|allyyyyyyyyyyylonggggggggg| 
    |sdddfasdfsdfasdfsadfsdfsds| 
    |--------------------------|

來源

2012-03-29 Dynamikus

http://jsfiddle.net/tmqCR/ – 2012-03-29 21:51:11

日Thnx以撒，就是這樣。把它作爲答案，我可以給你學分。 – Dynamikus 2012-03-29 21:57:03

http://jsfiddle.net/tmqCR/

一些這些反應有你需要的。儘管如此，我認爲這一切都在一起。

來源

2012-03-29 22:00:48

很高興你發佈了這個答案。我看到了您的評論，但現在我可以給予您應得的滿意答案，並刪除我自己的答案，該答案不會打破非間隔文本。 :( – GolezTrol 2012-03-30 08:03:25

看看這個小提琴http://jsfiddle.net/FEZaJ/

的URL - 浮動它離開;

來源

2012-03-29 21:45:01 msponagle

我需要包裝文本 – Dynamikus 2012-03-29 21:46:20

當你添加更多的內容浮動環繞和它打破 – Ibu 2012-03-29 21:46:51

文本沒有空格或強制文本被打破的字符。 – Dynamikus 2012-03-29 21:48:09

的HTML：

<div class="container"> 
    <div class="url"> 
    URL: 
    </div> 
    <div class="text"> 
    Lorem Ipsum dolor 
    Lorem Ipsum dolor 
    Lorem Ipsum dolor 
    Lorem Ipsum dolor 
    </div> 
    <div class="clear"></div> 
</div>

的CSS：

.url { 
    float:left; 
    width:60px; 
} 
.text { 
    float:left; 
    width:200px; 
} 
.clear { 
    clear:both; 
}

來源

2012-03-29 21:45:44 Ibu

的media element。真的打破了浮動：左邊;第一個元素和第二個隱藏的溢出。

來源

2012-03-29 21:45:49 mikevoermans

嗨，我米創建這樣一個。

的CSS

.url { 
    float: left; 
    width: 75px; 
    background:pink; 
} 

.description{ 
    float: left; 
    width: 175px; 
    word-wrap: break-word; 
    text-align:justify; 
    background:lightgreen; 
}

HTML

<div class="url">URL:</div> 

<div class="description">thissdfsisalongurasdsdfreaallyyyyyyyyyyylongggggggggsdddfasdfsdfasdfsadfsdfsds</div>

現場演示Click here http://jsfiddle.net/rohitazad/tmqCR/25/

來源

2012-03-30 07:37:34

只是9小時前發佈的接受解決方案的副本。 – GolezTrol 2012-03-30 08:06:26

我怎樣才能達到這個佈局的CSS

回答

相關問題