Question

如需视觉参考，请点击此图片：https://i.gyazo.com/d17f94a4cf87dfb555780717773f49b3.jpg

我试图将图片中显示的文字放在相应图片旁边，它们都是＆＃34; h2＆＃34;元素。 img和h2元素都存储在无序列表中。 html看起来大致相当于一些基本调整大小的CSS：

#container{
    margin:auto;
    width:70%;
    height: 100%;
    border: 3px solid green;
    padding:10px;
}
img{
    height: 40%;
    width: 40%;
}
h1{
    text-align: center;
}
h2{
    text-align: right;
}


<nav>
  <div id ="container">
    <ul id = "list">
         img1
         title1
         img2
         title2
    </ul>
 </div>

重申一下，我怎样才能将标题放在图像的旁边。此外，是否可以使用不同的彩色背景来区分列表中的两个单独的图像，并在浅灰色和蓝色之间交替？

Answer 1

你可以这样做：

<nav>
  <div id ="container">
    <ul id = "list">
         <li><img src="https://timedotcom.files.wordpress.com/2015/01/trump.jpg"/></li>
         <li><h2>title1</h2></li>
         <li><img src="https://timedotcom.files.wordpress.com/2015/01/trump.jpg"/></li>
         <li><h2>title2</h2></li>
    </ul>
 </div>

img{
    height: 40%;
    width: 40%;
}

h1{
    text-align: center;
}
h2{
    text-align: right;
    margin:0px;
}
#list{
     list-style:none;
}
li{
    width:48%;
    display:inline-block;
}

小提琴：https://jsfiddle.net/frmmh6mh/

虽然我建议使用表格或浮动div来代替ul。

此外，页面上应该只有一个h2标签，而是使用h3。希望有所帮助：）

Answer 2

使用HTML标签，这样图像和文本将始终配对在一起。例如，

<div id="container">
  <label for="picture1"><!--Put text here!--></label>
  <img src="<!--img1-->" id="picture1" align="left"/>
  <label for="picture2"><!--Put text here!--></label>
  <img src="<!--img2-->" id="picture2" align="left"/>
</div>

然后，标签将与id="picture1"或id="picture2"绑定。 align="left"告诉图片在标签的左侧。

如何正确对齐此文本？

2 个答案: