Блог

Главная - Вопросы по программированию - Начальная загрузка Twitter, стилизация и использование класса media-grid

Начальная загрузка Twitter, стилизация и использование класса media-grid

#html #css #twitter-bootstrap

#HTML #css #twitter-начальная загрузка

Вопрос:

Я создаю простой веб-сайт для одного из моих приложений для iPhone, используя проект Twitter Bootstrap. Я создал полноценный веб-сайт с этим и нашел его довольно простым в использовании, но у меня возникли некоторые проблемы с media-grid.

Я пытаюсь создать строку из 3 изображений, используя класс media-grid. Изображения имеют ширину 280 пикселей, что дает мне в общей сложности 840 пикселей. Контейнер имеет ширину 940 пикселей, поэтому у меня есть разрешение 100 пикселей для заполнения и т.д. Я нахожу это чрезвычайно сложным для выполнения, поскольку, когда я просматриваю сайт, он помещает два изображения рядом, а затем третье в следующей строке. Однако обнаруживаются некоторые аномалии, которые;

  • Когда я публикую index.html и связанного с ним файла css через FTP на веб-сайте отображаются изображения с двумя соседними изображениями, затем третье изображение в следующей строке под первым.
  • Когда я просматриваю веб-сайт в «Coda» (редактор на Mac, который я использую для написания html и css), веб-сайт выглядит именно так, как я хочу, со всеми 3 изображениями рядом в одной строке.

Я перепробовал несколько способов;

  1. Я пробовал редактировать стили .media-grid в CSS, и, похоже, это не влияет на внешний вид сайта. Даже если бы у меня были огромные поля или отступы, это по какой-то причине не изменилось?
  2. Я попытался ввести свой собственный идентификатор в класс media-grid для трех изображений, затем выполнить стилизацию, а затем себя, что также не влияет на визуальные эффекты.

Я использовал следующий код для вставки своих изображений;

 <div class="container">

  <ul class="media-grid" id="imagearray">
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>

Я что-то упускаю в CSS? Я не свободно владею CSS, поэтому, возможно, я что-то упускаю из виду? Любая помощь была бы оценена.

Комментарии:

1. РЕДАКТИРОВАТЬ: теперь мне удалось получить все три изображения подряд, уменьшив ширину изображений. Однако все они выровнены по левой стороне. Я пробовал margin-left: auto; и margin-right: auto; и это вообще не влияет на это.

Ответ №1:

Чтобы заставить стиль по умолчанию работать правильно, вам нужно обернуть <li> s <a href> .

например

 <ul class="media-grid" id="imagearray">
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
</ul>