Question

我正在设计一个网站，并且正在努力调整我的图像，如下图所示（我使用adobe indesign制作的设计）。

enter image description here

如小提琴（// http://jsfiddle.net/rupsdino1997/uyL0jdxq/15/）所示，我的底部图像与我的顶部图像不对齐，而且它们相距太远，我需要它们更靠近在一起，如图所示下面的图片，同样，在小提琴中，The House标签与图像的垂直高度不同，（为什么会这样？以及如何修复？）

万分感谢！

以防小提琴失败的代码：

HTML code：

＆＃13;

$(document).ready(function() {

  var currentPosition = 0;
  var slideWidth = 1000;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideShowInterval;
  var speed = 3000;

  slideShowInterval = setInterval(changePosition, speed);
  slides.wrapAll('<div id="slidesHolder"></div>')
  slides.css({
    'float': 'left'
  });
  $('#slidesHolder').css('width', slideWidth * numberOfSlides);

  function changePosition() {
    if (currentPosition == numberOfSlides - 1) {
      currentPosition = 0;
    } else {
      currentPosition++;
    }
    moveSlide();
  }

  function moveSlide() {
    $('#slidesHolder')
      .animate({
        'marginLeft': slideWidth * (-currentPosition)
      });
  }
});

＆＃13;

    #wrapper #main ul.horizontal li {
      display: inline-block;
      list-style;
      none;
    }
    #wrapper #main .horizontal img {
      height: 250px;
      width: 200px;
      margin-top: 15px;
    }
    * {
      box-sizing: border-box;
    }
    #wrapper #main ul.horizontal li {
      display: inline-block;
      font-size: 16px;
      list-style;
      none;
      padding: 1em;
      text-align: justify;
      vertical-align: top;
      width: 25%;
    }
    img {
      display: block;
    }
    ul.horizontal {
      list-style;
      none;
      margin: 0;
      padding: 20;
      font-size: 0;
    }
    body {
      margin: 0px;
      color: #151515;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      background-color: #EFF5F8;
    }
    #slideshow #slideshowWindow {
      width: 1000px;
      height: 600px;
      margin: 0;
      padding: 0;
      position: relative;
      overflow: hidden;
    }
    #slideshow #slideshowWindow .slide {
      margin: 0;
      padding: 0;
      width: 1000px;
      height: 600px;
      float: left;
      position: relative;
    }
    #wrapper {
      width: 100%;
      min-width: 740px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      border: #6627C9;
      background-color: #FFFFFF;
    }
    #slideshow #slideshowWindow .slide img {
      height: 100%;
      width: 100%;
    }
    #top {
      overflow: hidden;
    }
    h1 {
      font-size: 65px;
      margin-top: 0px;
      margin-bottom: 14px;
      color: #3399DD;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      max-width: 100%;
      text-align: center;
    }
    h2 {
      margin-top: 0.5em;
    }
    #mainimg img {
      max-width: 100%;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    h1,
    h2 {
      color: #3399CC;
      font-weight: 600;
      font-size: 36px;
    }
    figure {
      display: block;
      width: 740px;
    }
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    footer {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 2%;
      background-color: #43a6cb;
      color: #FFFFFF;
    }
    a {
      font-weight: bold;
      text-decoration: none;
    }
    a:link {
      color: #FF6600;
    }
    a:visited {
      color: #FF944C;
    }
    #mainnav a:hover,
    #mainnav a:active,
    #mainnav a:focus,
    #mainnav a.thispage {
      color: #FFFFFF;
      text-decoration: none;
      background-color: #43A6CB;
    }
    #mainnav ul {
      list-style-type: none;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
    #mainnav a {
      width: 20%;
      background-color: #4D4D4D;
      text-align: center;
      text-transform: uppercase;
      color: #FFFFFF;
      padding-top: 6px;
      padding-bottom: 6px;
      display: block;
      float: left;
    }

＆＃13;

<body>
  <div id="wrapper">
    <header id="top">
      <h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
      <nav id="mainnav">
        <ul>
          <li><a href="Index.html" class="thispage">Home</a>
          </li>
          <li><a href="Properties Features.html">Features</a>
          </li>
          <ul>
            <li>
              <a href="article.html">Article</a>
            </li>
          </ul>
          <li><a href="Activities.html">Activities</a>
          </li>
          <li><a href="Contact.html">Contact US</a>
          </li>
          <li><a href="Pricing.html">Pricing</a>
          </li>
        </ul>
      </nav>
      <div id="slideshow">
        <div id="slideshowWindow">
          <div class="slide">
            <img id="mainimg" src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" />
          </div>
          <div class="slide">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" />
          </div>
          <div class="slide">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" />
          </div>
        </div>
      </div>
      <article id="main">
        <ul class="horizontal" style="padding-top: 15px">
          <li>
            <h1>The House</h1>
            <p>
              This magnificient self-catering gite de charme is situated in the centre of Felines-Termenes, a village in the rolling hills of the Hautes Corbieres. It has a lot of cachet and history. Local legend has it that Napoleon III once slept in this former auberge
              on his way waging war with Spain. The oldest foundations of the house are Roman.
            </p>
          </li>
          <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" />
          </li>
          <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" />
          </li>
          <li>
            <div>
              <img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" />
            </div>
          </li>
        </ul>
        <p style="margin: 0px 30px 10px 30px">
          The house has been entirely renovated with respect for the original elements like stone walls, wooden beams, … This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered
          court yard and garage in the basement. This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic
          towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage
          of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property.
        </p>
      </article>

      <footer>Powered By Ruben &copy; 2015</footer>

＆＃13;

对齐我的图片和文字有困难

0 个答案: