gpt4 book ai didi

css - 如何对齐我的内容

转载 作者:太空宇宙 更新时间:2023-11-04 10:00:27 25 4
gpt4 key购买 nike

我几乎成功地制作了对齐的 html 和 css,但是在写“今天”和“昨天”之间内容没有对齐。我希望它看起来像一张 table 。现在它写了“今天”并且只是打包内容,这样下一行看起来就没有调整过。

enter image description here

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

我尝试用带有语义用户界面的单元格排成一排,但这让事情变得更糟。你能帮帮我吗?

我希望它看起来像这样(模型)

enter image description here

如果我制作行和单元格,它会起作用吗?

最佳答案

.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%;
}
}

关于css - 如何对齐我的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38385716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com