CSS HTML организовать 5 изображений - кросс-браузер совместим - PullRequest
Новая
       15

CSS HTML организовать 5 изображений - кросс-браузер совместим

0 голосов
/ 06 октября 2010

У меня есть 5 изображений, которые я хочу организовать в виде ASP.NET MVC.Поэтому мне нужно решение HTML + CSS (я предпочитаю не использовать для этого jQuery, для максимальной совместимости).

Я хочу организовать изображения следующим образом: 

  Image1           Image2

  Image3           Image4

           Image5

ВСначала я попытался использовать таблицы, используя HTML: 

<div class="table1">
    <table border=1>
      <tbody>
        <tr>
          <td>
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
          </td>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
    </div>                    
    <div class="table2">
    <table border=1>
      <tbody>
        <tr>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
          </p>
          </td>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
    </div>
    <div class="table3">
    <table border=5>
      <tbody>
        <tr>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
</div>

и часть css: 

.mainArticleImage {    
    height: 95px;
    width: 120px;
}
.ImageCenterContainer {
    margin: 0 auto;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    text-align:center;
}

, но это не работает в IE.

Этот подход тоже не слишком хорошо работал.

Какой самый лучший, самый простой, кросс-браузерный способ выполнить то, что казалось бы легкой задачей

Ответы [ 2 ]

2 голосов
/ 06 октября 2010

Как насчет этого: http://jsfiddle.net/um6d7/

0 голосов
/ 06 октября 2010

@ Брайан Фланаган (этот ответ был слишком длинным для комментария)

Я использую IE8, но это решение должно работать и для более старых версий IE.Разве не должно быть достаточно просто организовать 5 картинок на экране?: -P

Я должен также упомянуть, что я не копировал и не вставлял ваше решение "как есть", так как я не хотел, чтобы мой CSS ссылался на общие теги, такие как img и div, но изменения бессмысленны с точки зрения логики.Фактический код, который я использовал:

HTML: 

<div id="imagesContainer">
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>​

CSS: 

#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}

какие-либо предложения?

...