代码之家 › 专栏 › 技术社区 › Andreas

Div溢出未正确对齐

css html

-3

Andreas · 技术社区 · 7 年前

我怎样才能使第二条线成为一条线,而不是像现在这样分开?

我试着用 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>

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

2 回复 | 直到 6 年前

Marc Hjorth 7 年前

如果您想使用“表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>

ShailyAggarwal 7 年前

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/