Question

如何只使用CSS而不使用表格来显示文本？

＆＃13;

.first {
  font-weight: bold;
}

.second {
  margin-left: 60px;
}

＆＃13;

<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Take Canada's Northwest Territories. You can vicariously poke around the funky capital, Yellowknife. You can click through the two main bush-breaching highways, see the igloo church in Inuvik, and find where the camera car got lost and turned around at
    a hunting shack. There's even a photo of stray dogs near the overgrown gas-stop of Enterprise, fitting but random.
  </p>
</div>

＆＃13;

Answer 1

我认为使用flexbox是最容易的。

＆＃13;

.row {
  display: flex;
}

.first {
  font-weight: bold;
}

.second {
  margin-left: 20px;
}

＆＃13;

<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Take Canada's Northwest Territories. You can vicariously poke around the funky capital, Yellowknife. You can click through the two main bush-breaching highways, see the igloo church in Inuvik, and find where the camera car got lost and turned around at
    a hunting shack. There's even a photo of stray dogs near the overgrown gas-stop of Enterprise, fitting but random.
  </p>
</div>

＆＃13;

Answer 2

可能有多种解决方案，例如display:table-cell，但我建议您使用Google Flexbox。

这是一个suggested article。

Answer 3

由于flex-box没有很好的遗留支持，所以这里只使用一个简单的浮点数来解决你的问题。

第一项只是向左浮动。

＆＃13;

p {
  margin:0;
}

.first {
  font-weight: bold;
  float:left;
}

.second {
  margin-left: 60px;
}

.row {
  margin-bottom:20px;
}

＆＃13;

<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Take Canada's Northwest Territories. You can vicariously poke around the funky capital, Yellowknife. You can click through the two main bush-breaching highways, see the igloo church in Inuvik, and find where the camera car got lost and turned around at
    a hunting shack. There's even a photo of stray dogs near the overgrown gas-stop of Enterprise, fitting but random.
  </p>
</div>
<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Take Canada's Northwest Territories. You can vicariously poke around the funky capital, Yellowknife. You can click through the two main bush-breaching highways, see the igloo church in Inuvik, and find where the camera car got lost and turned around at
    a hunting shack. There's even a photo of stray dogs near the overgrown gas-stop of Enterprise, fitting but random.
  </p>
</div>

＆＃13;

Answer 4

将float: left添加到.first课程。

＆＃13;

.first {
  float: left;
  font-weight: bold;
}

.second {
  margin-left: 60px;
}

＆＃13;

<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur leo et lectus sollicitudin pharetra. Cras a sapien id est facilisis rutrum non id augue. Fusce suscipit volutpat libero, vitae vulputate neque dictum non. Nullam vel congue libero, vel auctor magna. Suspendisse commodo sem at dapibus efficitur. Ut metus nisl, consectetur eu quam sit amet, ornare condimentum felis. Donec dapibus sapien consectetur est blandit fringilla. Proin eu est at lacus tempor tincidunt eget at ante. Mauris in nisl at nulla auctor pulvinar.
  </p>
</div>
<div class='row'>
  <p class='first'>second</p>
  <p class='second'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur leo et lectus sollicitudin pharetra. Cras a sapien id est facilisis rutrum non id augue. Fusce suscipit volutpat libero, vitae vulputate neque dictum non. Nullam vel congue libero, vel auctor magna. Suspendisse commodo sem at dapibus efficitur. Ut metus nisl, consectetur eu quam sit amet, ornare condimentum felis. Donec dapibus sapien consectetur est blandit fringilla. Proin eu est at lacus tempor tincidunt eget at ante. Mauris in nisl at nulla auctor pulvinar.
  </p>
</div>

＆＃13;

https://jsfiddle.net/49uwm8qz/

Answer 5

Flexbox救援。这是一个更新的小提琴https://jsfiddle.net/qmhxbsvv/2/。

CSS

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.first {
  flex: 1;
  max-width: 50px;
}
.second {
  flex: 1;
}

HTML

<div class='row'>
  <p class='first'>first</p>
  <p class='second'>
    Take Canada's Northwest Territories. You can vicariously poke around the funky capital, Yellowknife. You can click through the two main bush-breaching highways, see the igloo church in Inuvik, and find where the camera car got lost and turned around at
    a hunting shack. There's even a photo of stray dogs near the overgrown gas-stop of Enterprise, fitting but random.
  </p>
</div>

不使用表格的一行中的两个文本块

5 个答案:

CSS

HTML