Question

您好，我知道这是一个愚蠢的问题，但我找不到这种情况的解决方案，我的CSS技能不好:(。

如何实现以下布局。文本应该包装在容器的末尾（div，span，等等）

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

Answer 1

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

Answer 2

http://jsfiddle.net/tmqCR/

其中一些回复符合您的需求。我认为这一切都在一起。

Answer 3

查看这个小提琴http://jsfiddle.net/FEZaJ/

网址 - 将其浮动;

Answer 4

media element。真的分解为漂浮：左;在第一个元素和第二个隐藏的溢出。

Answer 5

你好我创造了这个。

<强>的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/

我怎样才能实现这种布局css

5 个答案: