CSS多个图像定位和样式

Question

我正在使用HTML和CSS制作BBC新闻网站，我已经完成了顶级菜单栏，但之后出现了问题。

正如您在图像中看到的那样，有一个大图像左对齐并完全位于文本标题后面，有4个图像需要在大图像的右侧对齐，4个图像具有相同的高度和宽度为307×107，并且还有文字写在上面。

请任何人都可以帮助实现这种布局我厌倦了尝试所有制作divs并放入列表项目并且向左浮动也没有任何效果。

Answer 1

Awais，如果您使用开发人员工具检查BBC网站，您可以确切地看到他们是如何做到的。他们有一个容器和一个UL类，有5个图像。大图像占用div的50％，其余较小的图像占25％。然后所有内容都向左浮动，占div宽度的100％。

以下是我所做的快速摘要：http://codepen.io/anon/pen/BQgpwy

.container {
  height: 600px;
  background-color: black;
}

ul {
  padding: 0;
  margin: 0;
}

#image1 {
  width: 50%;
  height: 600px;
  float: left;
  background-color: blue;
}

#image2 {
  width: 25%;
  height: 300px;
  float: left;
  background-color: red;
}

#image3 {
  width: 25%;
  height: 300px;
  float: left;
  background-color: purple;
}

#image4 {
  width: 25%;
  height: 300px;
  float: left;
  background-color: green;
}

#image5 {
  width: 25%;
  float: left;
  background-color: red;
  height: 300px;
}

<div class="container">
  <ul>
    <li id="image1"></li>
    <li id="image2"></li>
    <li id="image3"></li>
    <li id="image4"></li>
    <li id="image5"></li>
  </ul>
</div>

Answer 2

虽然你的小提琴中的html结构和图像没有正确显示，但我在那里尝试了一些修复。试试吧，希望它能帮助你走得更远。

HTML：

我在div'gallery'中添加了div'leum1'。

<div id="gallery">
   <ul id="bigimg">
      <li><img src="images/1.jpg" /></li>
   </ul>
   <div id="gallery1">

      <ul id="smallimages">

        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/5.jpg"></li>

      </ul>

    </div>
</div>

CSS：

我修改了你的这部分css

 #headingdiv ul{
      display: inline-block;
 }

 #bigimg{
  display: inline-block;
  width: 48%;
}

#bigimg img{
     width: 100%; 
}

#gallery1 {
   display: inline-block;
   width: 48%;
}

#smallimages li {
   position: relative;
   display: inline-block;
   /* width: 100%; */
   /* left: 620px; */
   /* top: -364px; */
   /* margin: 1%; */
   text-align: right;
}