Div溢出未正确对齐

Question

我如何使第二行成为一行而不是像现在这样拆分？

看起来像这样：

我尝试使用display: table和table-cell，但没有区别。

我似乎从未与CSS相处。

css：

<style>

.column1 {
    float: left;
    width: 10%;
    font-size: 350%;
}
.column2 {
    float: left;
    width: 10%;
    font-size: 350%;
}
.column3 {
    float: left;
    width: 80%;
    font-size: 350%;
}


</style>

html：

<div class="row" style="display: table">
  <div class="column1" style="background-color:#ccc;" display: table-cell;>
    <b>col1</b><br>
    <div style="background-color:#FF0000;">32</div>
    <div style="background-color:#00FF00;">33</div>
  </div>
  <div class="column2" style="background-color:#ccc;" display: table-cell;>
    <b>col2</b><br>
    <div style="background-color:#FF0000;">11:00</div>
    <div style="background-color:#00FF00;">12:00</div>  
  </div>
  <div class="column3" style="background-color:#ccc;" display: table-cell;>
    <b>col3</b><br>
    <div style="background-color:#FF0000;">This is some text That will overflow the div by a few words</div>
    <div style="background-color:#00FF00;">Next line</div>
  </div>

Answer 1

如果您想使用“表CSS”，还可以调整标记。我在这里做了一个例子

Demo here

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
}

th {
    background-color: white;
}

tr:nth-child(odd) {
    background-color: #00FF00;
}

tr:nth-child(even) {
    background-color: #FF0000;
}

<table>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td>31</td>
    <td>11:00</td>
    <td>This is some text That will overflow the div by a few words</td>
  </tr>
  <tr>
    <td>32</td>
    <td>12:00</td>
    <td>Next line</td>
  </tr>
</table>

Answer 2

这就是我能够实现它的方式。为了正确实现自动换行，我们还需要使用display:table-row

CSS：

.column1 {
    float: left;
    width: 10%;
    font-size: 350%; //100%
}
.column2 {
    float: left;
    width: 10%;
    font-size: 350%; //100%
}
.column3 {
    float: left;
    width: 80%;
    font-size: 350%; //100%
}
.row1 {
    background-color:#ccc; 
    display: table-row;
}
.row2 {
    display: table-row;
    background-color:#FF0000;
}
.row3 {
    display: table-row;
    background-color:#00FF00;
}

HTML

<div style= "display: table;">
  <div class= "row1">
    <div class= "column1" style= "display:table-cell"><b>col1</b></div>
    <div class= "column2" style= "display:table-cell"><b>col2</b></div>
    <div class= "column3" style= "display:table-cell"><b>col3</b></div>
  </div>
  <div class= "row2">   
    <div class= "column1" style="display:table-cell">32</div>
    <div class= "column2" style= "display:table-cell">11:00</div>
     <div class= "column3" style= "display:table-cell">This is some text That will overflow the div by a few words</div>
  </div>
  <div class= "row3">
   <div class= "column1" style= "display:table-cell">33</div>
   <div class= "column2" style= "display:table-cell">12:00</div>  
    <div class= "column3" style="display:table-cell">Next line</div>
  </div>

演示链接：http://jsfiddle.net/5qc7adf9/1/show/ 由于此处的字体大小为350％，因此只能在全屏结果窗口中正确显示。为了在jsfiddle的结果窗口中正确查看它，我们需要减小字体大小。