Question

我的页面布局是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>

Answer 1

如果您需要帮助，可以提供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；对于两个列，请使用css属性width：50％（如果定义了主列宽度< / p>

显示“空”块

1 个答案: