我正在尝试创建一个关于页面，我在顶部有文本，我想在底部有两个图像彼此相邻，我一直遇到的问题是我无法弄清楚如何让他们下一步相互之间，它们位于底部，但它们彼此叠加。我希望它们的大小相等，占据Div盒子宽度的50％。我是HTML的初学者，这是我的第一个大项目。
这是我的代码
h1 {
color: white;
font-size: 50px;
font-family: ultra;
}
p {
color: white;
}
h2 {
color: white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color: #252525;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
img.img-1 {
float: left;
}
img.img-2 {
float: right;
}
.article {
display: inline-block;
width: 60%;
}
img {
margin-right: 10px;
width: 100%;
height: 50%;
}
.clear {
clear: both;
}<div class="sidenav">
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="Why Us.html">Why Us?</a>
<a href="Meet The Team.html">Meet The Team</a>
<a href="Gear.html">Gear</a>
<a href="Services.html">Services</a>
<a href="Products.html">Products</a>
<a href="Satisfied Customers.html">Reviews</a>
<a href="Location.html">Location</a>
<a href="Contact Us.html">Contact Us</a>
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div>
<div class="main">
<div class="rcorners1">
<div>Parapsychologists Peter Venkman, Raymond Stantz, and Egon Spengler were scientists working for Columbia University. After being called to the New York Public Library to investigate the recent paranormal activity, they encounterd a full-fledged ghost
but she frightend them away. They lost their jobs at the university after that, so the trio established the Ghostbusters, a paranormal investigation and elimination service. They developed high-tech equipment to capture ghosts and they opened
their business in a disused, run-down firehouse. In their first outing, Egon warns them never to cross the energy streams of their proton pack weapons, as this could cause a catastrophic explosion, and they captured their first ghost, Slimer,
depositing it in a specially built containment unit in the firehouse basement. As the paranormal activity increased in New York City, they hired a fourth member, Winston Zeddemore, to cope with demand.</div>
<div>The Ghostbusters were then called by cellist Dana Barrett, whose apartment was haunted by a demonic spirit, Zuul, a demigod worshipped as a servant to Gozer the Gozerian, a shape-shifting god of destruction and chaos. As the Ghostbusters investigated,
Dana was possessed by Zuul, which declared itself the "Gatekeeper", and Louis was also possessed by a similar demon, Vinz Clortho, the "Keymaster". Both demons speaked of the coming of the destructive Gozer and the release of the imprisoned ghosts.
The Ghostbusters took steps to keep the two apart.</div>
Walter Peck, a lawyer representing the Environmental Protection Agency, had the Ghostbusters arrested for operating as unlicensed waste handlers and he orderd their ghost containment system deactivated, causing the explosion that released the ghosts and
Louis/Vinz. The ghosts wreaked havoc throughout the city while Louis/Vinz advanced toward Dana/Zuul's apartment. After consulting blueprints of Dana's apartment building, the Ghostbusters learned that mad doctor and cult leader Ivo Shandor, declared
humanity too sick to deserve existing after World War I, designed the building as a gateway to summon Gozer and bring about the end of the world.
<div>The Ghostbusters were released from custody to combat the supernatural crisis. On the apartment building roof, Zuul and Vinz opened the gate between dimensions and they transformed into supernatural hellhounds. Gozer, in the form of a woman, is
subdued by the team, disappearing entirely, as her voice echoes that the "destructor" will follow, taking a form chosen by the team; Ray inadvertently recalls a beloved corporate mascot from his childhood "something that could never, ever possibly
destroy us" and the destructor arrived in the form of a giant Stay Puft Marshmallow Man that attacked the city. The Ghostbusters crossed their proton pack energy streams and fire them at Gozer's portal; the explosion closed the gate, destroys
Stay Puft/Gozer, and frees Dana and Louis. The Ghostbusters were welcomed on the street as heroes. After these events we changed our company name to Bust A Ghost and we continued to work catching ghosts, and we still are today. Also these events
were made in a documentry about us ca
</div>
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt="" /></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt="" /></div>
</div>
<div class="clear"></div>
</div>
</div>
答案 0 :(得分：0)
您遇到此问题是因为您为每个div分配了width: 60%，并且两者的合并率都超过了100％。您必须将它们设为50％而不是display:inline-block，然后将其设为float:left，后跟clear:both。试试这段代码。
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt=""/></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt=""/>
</div>
<div class="clear"></div>
.article {
float:left;
width: 50%;
height: 100px;
overflow: hidden;
}
img {
width: 100%;
height: 50%;
}
答案 1 :(得分：0)
使用
.article{
width: 50%;
float: left;
}
答案 2 :(得分：0)
例如，你不能在图像源中有空格（src =＆＃34;我们的Gadgets.jpg＆＃34;）。用户斜杠或下划线。
HTML
<div class="images">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
</div>
CSS
.images img {
display: block;
width: 50%;
float: left;
}