Меню горизонтальной таблицы с изображением и текстом ниже

ProgramBox

Меню горизонтальной таблицы с изображением и текстом ниже

Post author:admin
Запись опубликована:25 сентября, 2022
Post category:Вопросы по программированию

#html #css #menu #rows #css-tables

#HTML #css — код #меню #строки #css-таблицы

Вопрос:

Только что начал создавать некоторые базовые веб-страницы, и я хотел спросить: каков «правильный» способ дублирования 3 столбцов (см. в JsFiddle) во что-то вроде этого:

Что вы используете, чтобы создать еще одну строку таблицы, подобную этой, и центрировать изображение с текстом?

JsFiddle

Код:

 <div class="content4"> <img src="http://placehold.it/67x67">
  <div class="main">
    <ul class="infoBar">
      <li> <a href="#">god</a>
        <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo </div>
      </li>
      <li> <a href="#">damn</a>
        <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf <br>
          foobarfoobarf oobarfoo barfooba </div>
      </li>
      <li> <a href="#">menus</a>
        <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf oobarfoo <br>
          foobarfoobarf oobarfoo barfooba <br>
          foobarfoobarf <br>
          foobarfoobarf oobarfoo barfooba </div>
      </li>
    </ul>
  </div>
</div>

Таблица стилей:

 .main {
    margin: 0 auto;
    width: 1150px;
    font-family: 'Roboto';
    font-size: 16;
}

.content4 {
    background: white;
    height: 580px;
}

.infoBar li {
    list-style: none;
    float: left;
    margin-top: 30px;
    margin-left: 50px;
}

.infoBar a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-style: italic;
}

.infoBarText {
    margin-top: 25px;
    color: black;
    font-size: 14;
}

Ответ №1:

зачем использовать таблицу? Используйте три раздела и примените к нему display:inline-block. Вы также можете использовать сеточную систему bootstrap, чтобы сделать ее отзывчивой

Пожалуйста, обратитесь к этому документу

http://getbootstrap.com/css/#grid

Или, что еще лучше, вы можете использовать сеточную систему для создания двух отдельных строк с 3 столбцами в ней. может быть что-то вроде

 <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        1
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        2
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        3
    </div>
</div>

<div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        4
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        5
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        6
    </div>
</div>

1. Должен ли я получить плагин или что-то еще для использования сетки? Потому что, если я вставлю это в jsfiddle, это всего лишь 123456 друг под другом, изменение настроек col ничего не даст.

2. сначала обратитесь к документу. Для запуска фрагмента необходимо использовать зависимости начальной загрузки.

3. Извините, я ищу что-то более простое. Возможно, без использования каких-либо дополнительных div. Я изменил его следующим образом: jsfiddle.net/95L87/5 может быть, есть какой-то способ «сдвинуть» картинку влево? Это выглядело бы точно так, как результат, который мне уже был нужен

Ответ №2:

Используя классический подход:

 <div class="content4">
    <div class="main">
        <table class="infoBar">
            <tr>
                <td>
                    <img src="http://placehold.it/67x67">
                </td>
                <td><a href="#">god</a>
                </td>
            </tr>
            <tr>
                <td>amp;nbsp;</td>
                <td> 
                    <span class="infoBarText">foobarfoobarf oobarfoo barfooba
                        <br>foobarfoobarf oobarfoo barfooba
                        <br>foobarfoobarf
                        <br>foobarfoobarf oobarfoo barfooba
                        <br>foobarfoobarf oobarfoo barfooba
                        <br>foobarfoobarf oobarfoo barfooba
                        <br>foobarfoobarf oobarfoo
                    </span>
                </td>
            </tr>
        </table>
    </div>
</div>

1. Спасибо, это выглядит так, однако, как я могу добавить 3 из них в одну строку и 3 в другую? Я делал что-то подобное с кодом раньше: jsfiddle.net/95L87/5 , но я не знаю, как «вытолкнуть» изображение влево и добавить вторую строку

2. Используется отображение: встроенная таблица, чтобы получить 3 в строке, но как мне разбить одну строку? или я должен использовать поле, чтобы просто перенести его на следующую строку? jsfiddle.net/95L87/6

3. Вы могли бы заключить три из них в другое div / table каждое и сделать их block элементами.