我需要一只手将 3 张图片并排排列在一起答案

【问题标题】：I need a hand lining 3 images up together side by side我需要一只手将 3 张图片并排排列在一起
【发布时间】：2018-08-16 03:23:32
【问题描述】：

我正在创建一个关于 UFC 的网站，需要帮助我进行图像定位尝试定位它们但似乎无法获得我想要的结果，任何帮助都会很棒。

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">

<h1><u>Top Fighters</u></h1>

</head>

<body>



<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson">  <p> Demetrious Johnson is the 
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is 
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach 
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1 
draw and is the curent<br> flyweight champion. </p>    
</div>

<div id="connor">   
<img scr="connor.png"  alt="Connor Mcgegor">  
</div>

<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">    
</div>  

</body>

</html>


CSS

html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;   
}

h1 {
color: aqua;
text-align: center;
font-size:24pt;
}

.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}

p {
color: aliceblue;    
}

.connor {
position: center;
top: 8px;
right:12px; 
}

.daniel {
position: relative;

}

【问题讨论】：

使用表格来存放元素。
将width 和height 属性添加到图像并删除其他样式和包装div: <img scr="daniel.png" alt="Daniel Cormier" width="50" height="50"'><img scr="daniel.png" alt="Daniel Cormier" width="50" height="50"'><img scr="daniel.png" alt="Daniel Cormier" width="50" height="50"'>

标签： image positioning

【解决方案1】：

您可以设置一个容器div，其类为.container，固定宽度为x 像素，x = 3 * 图像宽度，因为您有三个图像。仅当您希望在浏览器窗口小于 3x 宽度时图像保持水平对齐时才使用此选项

.container{
    width: x px;
}

然后为您的图像 div 提供一个共享类，我们称之为.imgClass。现在把它们变成浮动；

.imgClass{
    float:left;
}

编辑：这意味着您的topfightercss.css css 文件应包含以下内容：

.container{
    width: 300 px; //Three times 100px = 300px
}
.imgClass{
    float:left;
    width: 100px; //All pictures are 100px wide. Not required.
}

还有你的 html 文件：

<div class="container">
  <div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
  <div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
  <div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>

【讨论】：

您好，坦克的回复，但我对编码比较陌生，不理解其中一些术语，请您提供更多帮助吗？