Question

我想将容器分成三个部分已经完成，但我无法弄清楚如何垂直对齐所有这些部分。

HTML：

<table width="100%">
<tbody>
    <tr>
        <td class="description">
            <div>
                <section class="col">
                    <h4>Description1</h4>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </section>
                <section class="col">
                    <h4>Description2</h4>
                    <div>blablalblablablalbla</div>
                </section>
                <section class="col">
                    <h4>Description3</h4>
                    <div>bl
                </section>
            </div>
        </td>
     </tr>
</tbody>

CSS：

.description {
    background: lightgrey;
}

.description .col {
    display: inline-block;
    width: 30%;
}

https://jsfiddle.net/kg4xao6m/

Answer 1

在CSS中使用vertical-align: top作为内联块元素。

.description .col {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

JSFiddle

Answer 2

我同意@David的答案，即垂直对齐各个部分的方法，但您也使用的表格显然有两个<tr>，其中三个<td>而不是每个table { background: lightgrey; } td { width: 30%; vertical-align: top; }。

从语义上讲，这更合适：

<table width="100%">
  <tbody>
    <tr>
      <td>
        <h4>Description1</h4>
      </td>
      <td>
        <h4>Description2</h4>
      </td>
      <td>
        <h4>Description3</h4>
      </td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td>blablalblablablalbla</td>
      <td>bl</td>
    </tr>
  </tbody>
</table>

public struct FilesToProcess
{
    public string RemoteFilePath;
    public string LocalFilePath;
}

List<FilesToProcess> list = new List<FilesToProcess>();
FilesToProcess myFiles = new FilesToProcess();

myFiles.RemoteFilePath = "/var/file/File1.txt";
myFiles.LocalFilePath = @"c:\file\File1.txt";
list.Add(myFiles);

myFiles.RemoteFilePath = "/var/file/File23.txt";
myFiles.LocalFilePath = @"c:\file\File23.txt";
list.Add(myFiles);

// and so on

HTML / CSS拆分容器分为3部分

2 个答案: