gpt4 book ai didi

html - 图像对齐

转载 作者:可可西里 更新时间:2023-11-01 14:53:43 25 4
gpt4 key购买 nike

我在这方面还很陌生,所以,这似乎是一个非常简单的问题。

我已经开始设计我自己的页面,下面的代码是我目前所处的位置。

它的外观是...

  • 左上角 - 我的标志
  • 右上角 - 导航
  • 左侧 - 图片/描述

我正在尝试做的,也是我遇到困难的地方,是让描述在每张图片下方完美对齐,并且当您在页面上移动时发生同样的事情。

目前发生的情况是,每张图片和下面的描述都在页面左侧一直向左对齐。

当前代码如下:

<body>
<div class="container">
<a href="#"><img src="#" alt="Title" width="300" height="100" /></a>
<div id="navbar">
<ul>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">City</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">Model</div>
</div>
</div>
</body>

最佳答案

我会像这样使用标记:

<figure class="images">
<img src="#" width="300" height="199" alt="City">
<figcaption>City</figcaption>
</figure>

<figure class="images">
<img src="#" width="300" height="199" alt="Model">
<figcaption>Model</figcaption>
</figure>

<figure class="images">
<img src="#" width="300" height="199" alt="Foo">
<figcaption>Foo</figcaption>
</figure>

还有一些示例 CSS:

.images {
float: left;
width: 300px;
min-height: 200px;
margin: 0 10px 0 0;
background-color: #EEE; /* just to show containers since image scr is blank */
}

.images:last-child {
margin-right: 0;
}

.images figcaption {
text-align: center;
}

Fiddle

关于html - 图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13945019/

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