gpt4 book ai didi

html - 在 HTML 中对齐图像

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

我正在为我的 HTML 类(class)开发一个网站,遇到了一个小问题。我使用标签将我的页面分成几个部分,每个部分都有不同的类。如果可能的话,我希望将我包含在列表右侧的框中创建的图像。

这是我到目前为止的所有建议,将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Halo Multiplayer Maps By Title</title>
<link type="text/css" rel="stylesheet" href="my_halo_style.css" />
</head>

<body>
<h1>Halo Multiplayer Maps by Title</h1>
<p>
There are so many different maps across the many Halo titles that it can even be difficult for the most devoted fans to keep track of which maps appear on each game.
Below, I have compiled a list of each Halo title with its corresponding maps.
</p>
<h2>Take Note:</h2>
<p>
Several of the later titles had numerous other multiplayer maps added through different map packs.
These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page.
<img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
</p>

<div id="halo1">
<h1>Halo:Combat Evolved</h1>
<p>
<ul>
<li>Battle Creek</li>
<li>Blood Gulch</li>
<li>Boarding Action</li>
<li>Chill Out</li>
<li>Chiron TL-34</li>
<li>Damnation</li>
<li>Derelict</li>
<li>Hang 'em High</li>
<li>Longest</li>
<li>Prisoner</li>
<li>Rat Race</li>
<li>Sidewinder</li>
<li>Wizard</li>
</ul>
<img src="Halo_Combat_Evolved.jpg" title="Halo:Combat Evolved" alt="Halo:Combat Evolved Cover" align="right" />
</p>
</body>
</html>

不知道它是否真的需要,但这是我在类设计中使用的外部样式表。

body 
{
background-color: black;
color: blue;
text-align: left;
margin-left: 15%;
margin-right: 15%;
border: 10px double blue;
padding: 20px 25px 20px 25px;
font-family: sans-serif;
}

#halo1 {background-color: black;
color: green;
border: 5px outset green;
padding: 10px;
margin: 50px;
width: 600px;
text-align: left; }

#halo2 {background-color: red;
color: orange;
border: 5px outset orange;
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

#halo3 {background-color: orange;
color: black;
border: 5px outset black
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

#halowars {background-color: blue;
color: white;
border: 5px outset white;
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

#haloreach {background-color: black;
color: silver;
border: 5px outset silver;
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

#halo1a {background-color: silver;
color: black;
border: 5px outset black;
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

#halo4 {background-color: black;
color: blue;
border: 5px outset blue;
padding: 10px;
margin: 50px;
width: 400px;
text-align: left; }

最佳答案

您需要为您的图像换行,以在新行和右侧开始。以下代码将更新此网页中的所有图像以右对齐。

img {
float: right;
clear: both;
display: block;
}

#halo1 {background-color: black;
color: green;
border: 5px outset green;
padding: 10px;
margin: 50px;
width: 600px;
text-align: left;
height: auto;
float: left; /* so it will wrap the images */
}

对于您的 HTML,您可以更新为以下内容:

<p>
Several of the later titles had numerous other multiplayer maps added through different map packs.
These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page.
<br><img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
</p>

Dabblet demo here.

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

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