时间戳

首页 > 解决方案 > 图像未排列查询的页面布局？

html - 图像未排列查询的页面布局？

问题描述

我想布局我的页面，左侧有一列图像，右侧有一列文本，右侧是另一列图片，右侧是最后一列文本这页纸。我无法排列列和文本，也无法将它们排列在顶部。

HTML

<main>
  <div id="slideshow1" class="slideshow-container"> 
    <div class="mySlidesfade"> 
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image1.jpg" alt="image 1" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 1</div>
      </div>
    </div>
    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image2.jpg" alt="image 2" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 2</div>
      </div>
    </div>
    <a class="prev" onclick="plusSlides(-1, slideshow1)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow1)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow1)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow1)"></span>   
    </div>
  </div>
  <div id="slideshow2" class="slideshow-container"> 

    <div class="mySlidesfade"> 
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image3.jpg" alt="image 3" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 3</div>
      </div> 
    </div>

    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image4.jpg" alt="image 4" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 4</div>
      </div> 
    </div>

    <a class="prev" onclick="plusSlides(-1, slideshow2)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow2)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow2)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow2)"></span>  
    </div>
  </div>
  <div id="slideshow3" class="slideshow-container"> 

    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image5.jpg" alt="image 5" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 5</div>
      </div> 
    </div>

    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image6.jpg" alt="image 6" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 6</div>
      </div> 
    </div>

    <a class="prev" onclick="plusSlides(-1, slideshow3)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow3)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow3)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow3)"></span>  
    </div>
  </div>
  <div id="slideshow4" class="slideshow-container"> 

    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image7.jpg" alt="image 7" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 7</div>
      </div> 
    </div>

    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image8.jpg" alt="image 8" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 8</div>
      </div> 
    </div>

    <a class="prev" onclick="plusSlides(-1, slideshow4)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow4)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow4)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow4)"></span>  
    </div>  
  </div>
  <div id="slideshow5" class="slideshow-container1"> 

    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image9.jpg" alt="image 9" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 9</div>
      </div> 
    </div>

    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image10.jpg" alt="image 10" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 10</div>
      </div> 
    </div>

    <a class="prev" onclick="plusSlides(-1, slideshow5)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow5)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow5)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow5)"></span>  
    </div>
  </div>
  <div id="slideshow6" class="slideshow-container1"> 

    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image11.jpg" alt="image 11" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 11</div>
      </div> 
    </div>

    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image12.jpg" alt="image 12" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 12</div>
      </div> 
    </div>

    <a class="prev" onclick="plusSlides(-1, slideshow6)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow6)">&#10095;</a>

    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow6)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow6)"></span>  
    </div>
  </div>
  <div id="slideshow7" class="slideshow-container1"> 
    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image13.jpg" alt="image 13" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 13</div>
      </div> 
    </div>
    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image14.jpg" alt="image 14" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 14</div>
      </div> 
    </div>
    <a class="prev" onclick="plusSlides(-1, slideshow7)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow7)">&#10095;</a>
    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow7)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow7)"></span>  
    </div>
  </div>
  <div id="slideshow8" class="slideshow-container1"> 
    <div class="mySlidesfade">
      <div class="numbertext">1 / 2</div>
      <div class="loader"></div>
      <img src="images/image15.jpg" alt="image 15" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 15</div>
      </div> 
    </div>
    <div class="mySlidesfade">
      <div class="numbertext">2 / 2</div>
      <div class="loader"></div>
      <img src="images/image16.jpg" alt="image 16" style="max-width: 100%">
      <div class="overlay">
        <div class="text">image 16</div>
      </div> 
    </div>
    <a class="prev" onclick="plusSlides(-1, slideshow8)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1, slideshow8)">&#10095;</a>
    <div style="text-align:center"> 
      <span class="dot" onclick="currentSlide(1, slideshow8)"></span>  
      <span class="dot" onclick="currentSlide(2, slideshow8)"></span>  
    </div>
  </div>
  <script>
    var slideshow1 = document.getElementById("slideshow1");
    slideshow1.currentSlideIndex = 1; 
    showSlides(slideshow1.currentSlideIndex, slideshow1);

    var slideshow2 = document.getElementById("slideshow2"); 
    slideshow2.currentSlideIndex = 1; 
    showSlides(slideshow2.currentSlideIndex, slideshow2); 

    var slideshow3 = document.getElementById("slideshow3"); 
    slideshow3.currentSlideIndex = 1; 
    showSlides(slideshow3.currentSlideIndex, slideshow3);

    var slideshow4 = document.getElementById("slideshow4"); 
    slideshow4.currentSlideIndex = 1; 
    showSlides(slideshow4.currentSlideIndex, slideshow4);

    var slideshow5 = document.getElementById("slideshow5"); 
    slideshow5.currentSlideIndex = 1; 
    showSlides(slideshow5.currentSlideIndex, slideshow5);

    var slideshow6 = document.getElementById("slideshow6"); 
    slideshow6.currentSlideIndex = 1; 
    showSlides(slideshow6.currentSlideIndex, slideshow6);

    var slideshow7 = document.getElementById("slideshow7"); 
    slideshow7.currentSlideIndex = 1; 
    showSlides(slideshow7.currentSlideIndex, slideshow7);

    var slideshow8 = document.getElementById("slideshow8"); 
    slideshow8.currentSlideIndex = 1; 
    showSlides(slideshow8.currentSlideIndex, slideshow8);

    function plusSlides(n, slideshow) { 
      showSlides(slideshow.currentSlideIndex += n, slideshow); 
    } 

    function currentSlide(n, slideshow) { 
      showSlides(slideshow.currentSlideIndex = n, slideshow); 
    } 

    function showSlides(n, slideshow) {
      var i;
      var slides = slideshow.getElementsByClassName("mySlidesfade");
      var dots = slideshow.getElementsByClassName("dot");
      if (n > slides.length) {slideshow.currentSlideIndex = 1}    
      if (n < 1) {slideshow.currentSlideIndex = 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[slideshow.currentSlideIndex-1].style.display = "block";  
      dots[slideshow.currentSlideIndex-1].className += " active";
    }
  </script>
  <section class="intro">
    <ul class="intro-a"><b>Text text text…&lt;i>text text!</i></b></ul><br>
    <ul class="intro-b"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-c"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-d"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-e"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-f"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-g"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-h"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
    <ul class="intro-i"><li>Text text text text text text text text text text text text text text text text text text text text text text text text text text text.</li></ul><br>
  </section>
  <section class="intro-aa">
    <ul class="intro-j"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
    <ul class="intro-k"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
    <ul class="intro-l"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
    <ul class="intro-m"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
    <ul class="intro-n"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
    <ul class="intro-o"><li>Text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2.</li></ul><br>
  </section>
</main>

CSS

.slideshow-container {
  max-width: 7.54em;
  height: 0;
  position: relative;
  margin-bottom: 1em;
  display: block;
  float: left;
  clear: none;
  background-size: contain;
  margin-top: 5em;
}

.slideshow-container:hover .overlay {
  bottom: 0;
  height: 1.5em;
}

.slideshow-container1 {
  max-width: 7.54em;
  height: 0;
  position: relative;
  margin-bottom: 1em;
  display: block;
  float: left;
  clear: none;
  background-size: contain;
  margin-top: 5em;
  margin-left: 40em;
}

.slideshow-container1:hover .overlay {
  bottom: 0;
  height: 1.5em;
}

.loader {
  position: absolute;
  border: .2em solid #f3f3f3; /* Light grey */
  border-top: .2em solid #AFB6BB; /* Blue */
  border-radius: 50%;
  width: .75em;
  height: .75em;
  margin: .2em 0em 0em 17.9em;
  -webkit-animation: spin 3s;
  animation: spin 1s;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-timing-function: linear;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 0.5em;
  margin-top: 6em;
  color: white;
  font-weight: bold;
  font-size: 0.5em;
  transition: 0.6s ease;
  border-radius: 0 0.1875em 0.1875em 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0.1875em 0 0 0.1875em;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 0.75em;
  padding: 0.2em 0.2em;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 0.5em;
  width: 0.5em;
  margin: 0 0.125em;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.intro {
  padding: 5em 25em 1em 15em;

}

.intro-a {
  font-family: "Times New Roman";
  font-size: 1.3em;
}

.intro-b {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-c {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-d {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-e {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-f {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-g {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-h {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-i {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-aa {
  padding: 7em 0 1em 60em;
}

.intro-j {
  font-family: "Times New Roman";
  font-size: 1.3em;
}

.intro-k {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-l {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-m {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-n {
  font-family: "Times New Roman";
  font-size: 1em;
}

.intro-o {
  font-family: "Times New Roman";
  font-size: 1em;
}

标签： htmlcss

解决方案

真的很难在没有图像出现的情况下调试你的代码。离开你的描述，你可以试试这个。

.col {
 width: 25%;
 display: inline-block;
 float: left;
}
<div class="col">Column of Images 1</div>
<div class="col">Column of Text 1</div>
<div class="col">Column of Images 2</div>
<div class="col">Column of Text 2</div>

你提到排队物品？你的意思是这样的吗？

.col {
  width: 50%;
  display: inline-block;
  float: left;
}
.rowSeg {
  width: 100%;
  border-bottom: 1px solid red;
 }
.imageCol, .textCol {
  width: 50%;
  display: inline-block;
  float: left;
}
.clear-both { clear: both; }
<div class="col">
  <div class="rowSeg">
    <div class="imageCol">Image Column 1</div>
    <div class="textCol">Text Column 1 - But I know the rage that drives you. That impossible anger strangIing the grief until the memory of your loved one is just poison in your veins. And one day, you catch yourself wishing the person you loved had never existed so you'd be spared your pain.</div>
    <div class="clear-both"></div>
   </div>
</div>
<div class="col">
  <div class="rowSeg">
    <div class="imageCol">Image Column 2</div>
    <div class="textCol">Text Column 2 - What if, before she died, she wrote a letter saying she chose Harvey Dent over you? And what if, to spare you pain, I burnt that letter?</div>
    <div class="clear-both"></div>
   </div>
</div>

推荐阅读