页面布局与图像没有排队查询？

Question

我想用左侧的一列图像布局我的页面，右侧是一列文本，然后是右侧的另一列图片，右侧是最后一列文字手边的页面。我无法将列和文字对齐，我无法将它们排成一行。

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…<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;
}

Answer 1

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

.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>