英文:
How do you place two images together, with text, with both at center. I understand that you can change element size to make elements in center
问题
我试图将两张图片并排放置，并附上它们的描述。以下是我的代码。
我打算将两张图片并排放置，并伴随它们的文本。我尝试分割div元素，但问题是一个文本在另一个文本下面，而不是在旁边。文本需要在图像的右侧，第二张图像需要在第一个文本的右侧。
<div id="sheets">
<a href="Spreadsheet.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Flag_of_the_Roman_Empire.png" height="200" width="350"></a>
<h1>古罗马</h1>
<p>古罗马是一个伟大的文明，与古希腊一起，为现代世界的许多事物做出了贡献，如建筑、数字、字母和政府。</p>
</div><br><br><br><br><br><br><br><br>
<div id="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Pantheon_Rom_1_cropped.jpg" height="125" width="125">
<p>古罗马的一个著名建筑物。由于自7世纪以来一直在活跃使用，所以它保存得很好。万神殿有一个圆顶。</p>
</div>
<div id="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg" height="125" width="125">
<p>另一个著名的建筑物。用于娱乐大规模人群。大多数人在角斗士比赛中没有丧命。斗兽场有很多拱门。</p>
</div>
英文:
I'm trying to place two images side by side with their descriptions. Here is my code.
I intend to place two images side by side with their text. I tried to split div elements but the problem was that one piece of text was under the other, not next to the other. The text needs to be to the right of the image and the second image needs to be to the right of the first text.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#sheets {
width: 50%;
margin: auto;
}
#docs {
width: 25%;
margin: auto;
}
img {
float: left;
margin-right: 10px;
}
<!-- language: lang-html -->
<div id="sheets">
<a href="Spreadsheet.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Flag_of_the_Roman_Empire.png" height="200" width="350"></a>
<h1>Ancient Rome</h1>
<p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
</div><br><br><br><br><br><br><br><br>
<div id="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Pantheon_Rom_1_cropped.jpg" height="125" width="125">
<p>One famous building of Ancient Rome. It's in good condition because the building has been in active use since the 7th century. The Pantheon has a dome.</p>
</div>
<div id="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg" height="125" width="125">
<p>Another famous building. Was used for entertainment of huge crowds. Most people did not die in gladiator matches. The Colosseum has a lot of arches.</p>
</div>
<!-- end snippet -->
答案1
得分: 1
你的HTML中有一个错误。像 "docs" 这样的id需要是唯一的。我已经将其更改为类(class)。查看flexbox来将你的图像并排排列。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#sheets {
width: 50%;
margin: auto;
}
.docs {
width: 25%;
}
img {
float: left;
margin-right: 10px;
}
#container {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<html>
<body>
<div id="sheets">
<a href="Spreadsheet.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Flag_of_the_Roman_Empire.png" height="200" width="350"></a>
<h1>Ancient Rome</h1>
<p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
</div><br><br><br><br><br><br><br><br><br>
<div id='container'>
<div class="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Pantheon_Rom_1_cropped.jpg" height="125" width="125">
<p>One famous building of Ancient Rome. It's in good condition because the building has been in active use since the 7th century. The Pantheon has a dome.</p>
</div>
<div class="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg" height="125" width="125">
<p>Another famous building. Was used for entertainment of huge crowds. Most people did not die in gladiator matches. The Colosseum has a lot of arches.</p>
</div>
</div>
</body>
</html>
<!-- end snippet -->
英文:
you have a mistake in your html. id's like "docs" need to be unique. I changed that to a class. Look into flexbox to arrange your images side by side.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#sheets {
width: 50%;
margin: auto;
}
.docs {
width: 25%;
}
img {
float: left;
margin-right: 10px;
}
#container{
display:flex;
justify-Content:center;
}
<!-- language: lang-html -->
<html>
<body>
<div id="sheets">
<a href="Spreadsheet.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Flag_of_the_Roman_Empire.png" height="200" width="350"></a>
<h1>Ancient Rome</h1>
<p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
</div><br><br><br><br><br><br><br><br>
<div id='container'>
<div class="docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Pantheon_Rom_1_cropped.jpg" height="125" width="125">
<p>One famous building of Ancient Rome. It's in good condition because the building has been in active use since the 7th century. The Pantheon has a dome.</p>
</div>
<div class = "docs">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg" height="125" width="125">
<p>Another famous building. Was used for entertainment of huge crowds. Most people did not die in gladiator matches. The Colosseum has a lot of arches.</p>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论