html - 显示一个 "empty" block

我有一个页面布局 looks like this. ...基本上是一个页面标题，一组在左侧排列成两列的缩略图，第三列包含缩略图的大版本。我的问题是大图像顶部和页面顶部之间有相当大的差距(因为页面标题是一个简单的段落标记)。我可以通过将标题放在第一列的顶部来解决这个问题，然后 I end up with this . 我要的是this.我可以在标题的右侧添加一小段文字，但我的背景颜色不统一，所以它会很突出。另外，这不是一个非常优雅的解决方案。我可以使用表格并将标题跨越两个单元格，但我不想使用表格。

感谢任何和所有伟大的想法。谢谢。

编辑 - 添加了代码片段 - 这是我目前拥有的，相当于我发布的第一张图片。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  slides[slideIndex-1].classList.add("stickyimage");
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

.bgimg {
	background-image:url('Images/Draw/inkcircle_10pc_opacity.jpg')
}

.image7column {
  float: left;
  width: 14.28%;
  padding-right: 5px;
}

.bigcolumn {
	display: block;
	float: left;
	width: 71%;
	height: 1400px;
}

.mySlides {
  display: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script src="Image_handler.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="smallcss.css">
    <title>Images</title>
  </head>
  <body class="bgimg" onload="showSlides(1)";>
	<p> Images </p>

    <div class="image7column">
      <img src="Images/Draw/im1.jpg" style="width:100%;height:180px" alt="Image1">
      <img src="Images/Draw/im2.jpg" style="width:100%;height:180px" alt="Image2">
    </div>
	
    <div class="image7column">
      <img src="Images/Draw/im3.jpg" style="width:100%;height:180px" alt="Image3">
      <img src="Images/Draw/im4.jpg" style="width:100%;height:180px" alt="Image4"> 
    </div>   
	
<!-- Big column stuff in here   -->

  <div class="bigcolumn">

    <div class="mySlides">
      <img src="Images/Draw/im1.jpg" style="width:300px;height:300px" alt="big image 1">
    </div>
    <div class="mySlides">
      <img src="Images/Draw/im2.jpg" style="width:300px;height:300px" alt="big image 2">
    </div>
    <div class="mySlides">
     <img src="Images/Draw/im3.jpg" style="width:300px;height:300px" alt="big image 3">
    </div>
    <div class="mySlides">
     <img src="Images/Draw/im4.jpg" style="width:300px;height:300px" alt="big image 4">
    </div>

  </div> <!-- End of bigcolumn -->
 
  </body>
</html>

最佳答案

如果您需要一些帮助，可以提供您的 html 和 CSS。我可以看看，但我不会做你所有的代码。但如果我理解你的问题，你应该这样做: 对于您的问题，您应该创建 1 个主列，其中包含 2 个其他列，并具有类似这样的内容。

 <div id ="main-column">
      <h1>Title</h1>
      <div id="column-container">
          <div id="column1">
            Column 1
          </div>
        <div id="column2">
          Column 2
         </div>    
    </div>  
</div>

H1 占据主列的所有宽度，对于列容器，您可以使用 flex，或者对于 2 列，如果定义了主列宽度，则使用 css 属性 width : 50%

关于html - 显示一个 "empty" block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53157216/

html - 显示一个 "empty" block

上一篇：html - 填充最大高度

下一篇：javascript - 平滑旋转javascript边缘浏览器问题