在不使用标签的情况下制作表格结构？

Question

我尝试做的事情是这样的：

这是<table>的一行。换句话说，它是<tr>，其中包含三个<td> s。现在我想在不使用<table>标记（也不使用<ul> <li>标记）的情况下制作相同的结构。

我希望使用<div>来做到这一点。有可能吗？

这是我的代码：

---

＆＃13;

＆＃13;

<div class="share_edit_flag">
  <span>share</span>
  <span>share</span>
  <span>share</span>
</div>

<div class="editor">
  <a href="#">edited May 21 16 at 11:58</a>
  <div class="profile">
    <img src="#" />
    <a href="#">Rory O'Kane</a>
    <b>12.6k</b>
    <!-- I don't have any badge in my website -->
  </div>
</div>

<div class="author">
  <a href="#">asked May 21 16 at 11:51</a>
  <div class="profile">
    <img src="#" />
    <a href="#">vasanthkumarmani</a>
    <b>1</b>
    <!-- I don't have any badge in my website -->
  </div>
</div>

＆＃13;

＆＃13;

如您所见，我的代码结果看起来不像我问题中的图像。

目前为止据我所知，我需要为他们设置float，display属性。我已经对它们进行了测试，但没有达到预期的效果。

Answer 1

您可以使用display:table和display:table-cell属性。

  

表格 - 让元素的行为类似于<table>元素

     

table-cell - 让元素的行为类似于<td>元素

由于您只需要一行，因此如果需要，可以跳过table-row（<tr>）元素。有关此处display property的更多信息。

Flexbox也是一个很好的解决方案，除非你想要支持旧浏览器和IE。

示例：

.table {
  display: table;
  width: 100%; //if you want the table to extend the full width of the parent
}

.table > div {
  display: table-cell;
  border: 1px solid red; //added this for highlight
}

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>share</span>
    <span>share</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>

Answer 2

＆＃13;

＆＃13;

.container {
  display: flex;
  height: 30px; }

.first {
  flex: 1 1 auto;
  background: red; }

.second {
  width: 100px;
  background: green; }

.third {
  width: 100px;
  background: yellow; }

＆＃13;

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以使用flexbox实现它。并且它在100％宽度的容器中也是灵活的。但是，不支持旧浏览器。

http://caniuse.com/#feat=flexbox

希望它有所帮助。干杯！

Answer 3

这确实非常可能。

不久前，css flexbox已发布，现在可以在大多数浏览器中使用前缀。这在网络上经常使用，是一项非常好的学习技巧。

最近css grids爬了起来。在我看来，不值得花太多时间，但是这是一个很好的技能