Intereting Posts
WP CRON на общедоступном хостинге, который не позволяет соединения с обратной связью? Возможно ли сделать WordPress для WordPress для WordPress? Как заставить пользователей заполнять определенное пользовательское поле с помощью WyPiekacz? Пользовательское правило перезаписи для захваченного сообщения (правило перезаписи для перезаписи правила) Закажите персонализированный экран типа персонализированного почтового сообщения вторым типом заголовка пользовательского сообщения Thumbnail With Next / Prev Links Не показывая следующую запись? Как установить лимит почтового слова для пользовательского типа сообщения Каков наилучший способ перехвата функции перезаписи для определенного PHP-кода при обновлении плагинов? Проверьте, зарегистрирован ли пользователь на моем сайте WordPress, который находится на другом сервере Интеграция Карт Google с пользовательским маркером и зависанием? MetaBox не сохраняется после пустого Пользовательская таксономия показывает только 0 в автозаполнении для терминов и «Выберите из наиболее используемых тегов» Цикл Foreach возвращает более одного элемента при запросе таксономии Попытка вернуть список дочерних страниц для шаблона Можно ли использовать WP CLI для обновления темы, которая не находится в WordPress Repo?

Как сделать домашние виджеты горизонтальными

Я пытаюсь сделать домашние виджеты 1, 2 и 3 горизонтально рядом друг с другом. В настоящее время они распространяются друг над другом, а не рядом друг с другом. Я закодировал виджеты, чтобы включить некоторые внешние ссылки, ссылку на facebook и ссылку на пожертвование. К сожалению, это проект для класса и включает код и информацию для личного бизнеса нашего профессора, некоторые из которых не готовы к публикации. Если какая-либо информация требуется о коде, сообщите мне. Я новичок в кодировании wordpress и HTML, и в основном занимаюсь организацией этих виджетов. Это что-то, что можно сделать на панели WordPress, или это проблема с кодировкой? Благодарю.

Используйте CSS3 flexbox для управления CSS3 flexbox виджетов. Во-первых, оберните элементы виджета в разделе контейнера <div class="widgets-container"> . Добавьте уникальный класс в каждое подразделение виджета (в нашем примере: widget-1 , widget-2 и widget-3 ). Пример кода:

 <div class="widgets-container"> <div class="widget-1"> <!-- widget-1 code below --> <h2>Widget 1</h2> </div> <div class="widget-2"> <!-- widget 2 code below --> <h2>Widget 2</h2> </div> <div class="widget-2"> <!-- widget 3 code below --> <h2>Widget 2</h2> </div> </div> 

Это все для части HTML . Остальное – чистый CSS :

 .widgets-container { display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .widget-1, .widget-2, widget-3 { width: 30%; text-align: center; border: solid thin; } 

Подробнее о CSS Flexbox .

Виджеты отображаются как «divs» в html, которые по умолчанию отображаются как блоки, которые будут складываться, когда вы их видите.

Чтобы получить нужное поведение, вам нужно добавить стили CSS в таблицу стилей вашей темы, чтобы «поплавать» эти блоки друг против друга или устанавливать фиксированную или процентную ширину для каждого и отображать в виде желаемых встроенных блоков.

Подробнее о блочных VS-строках и других типах отображения для элементов html вы можете узнать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/display