Question

我一直试图将我的div组织成一排，但css由于某种原因不起作用。 div被称为容器和块。如果有人可以帮我把它们放到一个很好的水平排。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 var image1=new image()
 image1.src="theimage.png"
 var image2=new image()
 image2.src="soccerafrica.png"
 var image3=new image()
 image3.src="thatsall.png"

</script>
<style> 
li{ display:inline;
margin: 5rem;}
body{
    font-family: Verdana, Geneva, sans-serif;
}

ul { list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
    }
.container{overflow:hidden; color:white; display: inline-block;}
.block{ width:20rem; height: 30rem;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kinectricity</title>
</head>
<body style="background-color:#444444">
<h1 style="font-size:30px; background-color:#333333; margin:0px">
<center>
<nav>
    <div class="navi">
    <ul>
    <li><a href="index.html"><img src="CornerLogo1.png"height="100"width="200"></a></li>
    <li><a href="index.html"><img src="home.png"height="50"width="135"></a></li>
    <li><a href="aboutkinectricity.html"><img src="about.png"height="50"width="151"></a></li>
    <li><a href="contactkinectricity.html"><img src="contact.png"height="50"width="158"></a></li>
    <li><a href="shopkinectricity.html"><img src="cart.png"height="50"width="65"></a></li>
  </ul>
  </div>
</nav>
</center>
</h1>

<center>
<image style="border-left: 40px solid #333333; border-right:40px solid #333333; border-bottom:40px solid #333333"; border-top:none; id="ss" src="image.png" name="slideshow" alt="imageslideshow" height="525" width="1500">
<div id="rpt"></div>
</center>
<script>
var numberImage = 0;
var arr = ["image.png","image1.png","image2.png"];
$(function(){
    myslide(numberImage);
});

function myslide(numberImage){
  $('#ss').attr('src', arr[numberImage])
  numberImage++;
  if (numberImage>2) numberImage=0;
  setTimeout(function(){myslide(numberImage)} ,5000);
}
</script>
<h2 style="color:white;font-size:50px; font:'Avenir Next Regular';"><pre><u>    What We Offer                                   </u></pre></h2>
<div class="container">
<div class="block">
<img src="kball.jpeg" height="280rem" width="300rem">
<p><b>Kinetisphere Soccer Balls:</b> Kinectricity's soccer balls are unique - with pendulum technology, it store 3 hours of energy for every 30 minutes of play. Connect your device with the USB port to charge it or use it as a lamp. With its double use, you're saving electricity and helping the world.</p>
</div>
<div class="block">
<img src="skins.jpeg" height="280rem" width="300rem">
<p><b>Add Custom Skins: </b>Kinectricity offers the option of customization through our various soccer ball skins. Choose your favorite color or soccer team logo or send us your own design for additional cost.</p>
</div>
<div class="block">
<img src="africa.jpg" height="280rem" width="300rem">
<p><b>Donate: </b>Kinectricity's 1-for-1 program donates a soccer ball for each one sold to developing countries in need of electricity, through World Vision. Learn more about our charitable aspect and how you can help while getting a revolutionary Kinetisphere soccer ball.</p>
</div>
</div>
<center>
<p><iframe width="900" height="325" src="https://www.youtube.com/embed/paVygX5ghBE" frameborder="0" allowfullscreen></iframe></p>
</center>
</body>

</html>

Answer 1

除了DivakarDass的样式更改外，还应在容器行中包含clearfix css。

.container:before, .container:after {
  content: " ";
  display: table;
}

Answer 2

只需将float:left;添加到.block课程即可。喜欢这个

.block {
    width: 20rem;
    height: 30rem;
    float:left;
}

HTML将div对齐成一行

2 个答案: