Question

当第一行溢出时，如何使文本保持“在它自己的一边”？

我有一个包含两个div的部分。两个div并排放置，但如果第一行已满，则从第一个div下方的新行开始。（这就是问题）

第一个div是120px宽，因为这是可以在那里打印的最宽的文本。第二个div应该是屏幕的其余部分。

我创建了一个jafiddle的链接，以防页面上的那个没有说清楚。当你有一个小窗口（手机等）时会出现问题。

页面是从php生成的。

.section{
        display: inline-block;
        width: 100%;
        float: left;
    }
    .pTrans1{
        float: left;
        width: 120px;
        color: red;

    }
    .pTrans2{
        display: inline;
        
    }

<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

Answer 1

您可以使用display: table;

<强> DEMO

.section{
   display: table;
}
.pTrans1{
   width: 120px;
   color: red;
   display: table-cell;
 }
.pTrans2 {
  display: table-cell;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section><br>

Answer 2

我已经做了一个类似的例子，我想分享一下。您需要在这种情况下使用定位。这是一个固定流体的案例：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。接下来的内容太长了。

<强>段

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

Answer 3

使用.pTrans2作为margin-left

的块元素

.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
    float: left;
    width: 120px;
    color: red;

}
.pTrans2 {
    display: block;
    margin-left: 120px; 
}

演示：JSFiddle

Answer 4

你可以这样做：

<强> CSS

.section {
  display: block;
  width: 100%;
}

.pTrans1 {
  float: left;
  width: 120px;
  color: red;
}

.pTrans2 {
  display: block;
  margin-left: 120px;
}

<强> DEMO HERE

Answer 5

只需使用display: table-cell;中的.pTrans2代替display: inline;。

.pTrans2{
    display: table-cell;
}

<强> Updated Fiddle

＆＃13;

.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
   float: left;
   width: 120px;
   color: red;

}
.pTrans2{
    display: table-cell;
      
}

＆＃13;

<section>
    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>
</section><br>

＆＃13;

Answer 6

我更喜欢在display：table上使用新的flex-box规范。这完全是个人的，但我对CSS表系统有着深深的仇恨，它似乎总是以我不想要的方式行事。

所以，复制Nenad Vracars的答案略有修改：

您可以使用display: flex;

<强> DEMO

section{
   display: flex;
}
.pTrans1{
   width: 120px;
   color: red;
 }
.pTrans2 {
  flex: 1;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section>

Answer 7

像这样更改第二个div

.pTrans2{
        width: calc(100% - 120px);
        margin-left: 120px;
}

CSS word换行第二行文字

7 个答案: