如何对齐我的内容

Question

我几乎成功地使 html 和 css 对齐，但是在编写 "today" 和 "yesterday" 之间内容没有对齐。我希望它看起来像 table。现在它写入 "Today" 并只打包内容，以便下一行看起来没有调整。

.ui.left.floated {
    min-width: 80px;
}

<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">

<head>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>



<body>


  <div id="wrapper">    <div class="ui top attached tabular menu">
      <a class="item active" data-tab="first">All</a>
      <a class="item" data-tab="second">Company</a>
      <a class="item" data-tab="third">Private</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="first">
      <div class="ui divided items">





        <div style="margin-top:10px!important" class="item">


          <div class="ui left floated">
            Today
            <br>3:28


          </div>

          <div class="image">




            <a href="/vi/5773759738806272.html">

              <img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">

            </a>




          </div>
          <div class="content">
            <a class="header" href="/vi/5773759738806272.html">
                                                    Get Opencart Development Services from TRS Software Solutions </a>

            <div class="meta">
              <span class="price"></span>
            </div>
            <div class="description">
              <p>TRS Software Solutions is leading ...</p>
            </div>
            <div class="extra">
              <div class="ui label">






























                Services

              </div>
              <div class="ui label">

                For sale


              </div>
              <div class="ui label">Lakeland</div>
              <div class="ui label">Florida</div>
              <div class="ui right floated primary button">
                Buy now
                <i class="right chevron icon"></i>
              </div>
            </div>
          </div>


        </div>








        <div class="item">


          <div class="ui left floated">
            Yesterday
            <br>3:44


          </div>

          <div class="image">




            <a href="/vi/5329266862456832.html">

              <img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">

            </a>




          </div>
          <div class="content">
            <a class="header" href="/vi/5329266862456832.html">
                                                    Learn jQuery and JavaScript by creating an apple style thumb Slider </a>

            <div class="meta">
              <span class="price"></span>
            </div>
            <div class="description">
              <p>Originally started as a programming ...</p>
            </div>
            <div class="extra">
              <div class="ui label">






























                Services

              </div>
              <div class="ui label">

                For sale


              </div>
              <div class="ui label">Other city</div>
              <div class="ui label">Massachusetts</div>
              <div class="ui right floated primary button">
                Buy now
                <i class="right chevron icon"></i>
              </div>
            </div>
          </div>


        </div>








        <div class="item">


          <div class="ui left floated">
            12 July.
            <br>0:42


          </div>

我试着用带有语义的单元格排成一排-ui，但这让事情变得更糟。你能帮帮我吗？

我希望它看起来像这样（模型）

如果我制作行和单元格，它会起作用吗？

Answer 1

.ui.left.floated {
    min-width: 80px;
}

抱歉，这就是您想要的吗？这将确保所有图像都对齐？把它设为 100px，就好像日期是 .. 9 月 31 日（更长的措辞）

下面是我用于此类事情的网格系统。

/*________ GRID ________*/

.grid {
    margin: 0 auto;
    overflow: hidden;
    margin-left: -30px;
}
.grid > div {
    float: left;
    min-height: 1px;
    padding-left: 30px;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid .third {
    width: 33.33%;
}
.grid .halve {
    width: 50%;
}

等等。然后当你缩小到更小的尺寸时，例如手机。

@media (max-width: 740px) {
    .grid .third {
        width: 100%;
    }
}

如何对齐我的内容

How to align my content

css

semantic-ui