Сделать высоту всех коробок одинаковой

Kisxo

Я пытаюсь исправить это уже 3 дня, просмотрел бесчисленные форумы, видео, плагины, если бы кто-нибудь мог помочь мне исправить это в пользовательском CSS, это изменило бы мою жизнь.

Я пытаюсь сделать так, чтобы все серые прямоугольники имели одинаковую высоту, они определяются количеством контента/записи, которая у меня в них есть.

Я пытаюсь добавить к этому ' ' специальный редактор Word Press, но он не распознает код.

Я также пробовал несколько «пользовательских CSS»-кодов и даже возился с таблицей стилей. Пожалуйста, если кто-нибудь может пролить свет, это было бы здорово. пепел ссылка ниже:
https://transcriptsaustralia.com.au

demelek

Затем он может вернуться и отредактировать его в соответствии со своими потребностями в расширении.

ОП не смог понять, как сделать коробки одинаковой высоты, почему предоставленная мной информация не является хорошим началом? Кроме того, кто будет использовать шрифт, достаточно большой, чтобы добиться размера 420 ммфао...

41e090

Он может добавить достаточно слов, чтобы увеличить высоту, или если 420 пикселей — это достаточно большая высота, чтобы можно было использовать увеличенные шрифты или увеличенный объем текста, почему вы зря тратите все это пространство. Надежное решение автоматически адаптируется к изменениям. Установка высоты элемента настолько редко является разумным решением, что свойство высоты можно удалить из элементов потока без особого вреда. г

jfinister

Привет, Эш, Самый простой способ сделать это — установить минимальную высоту для ящиков.

Установите значение для самого высокого поля.

 .services-builder.style1 {min-height: 319px;}

Код (CSS): дайте мне знать, если вам понадобится дополнительная помощь.

Я веб-дизайнер компании Kodeak Digital Media Experts в Тусоне.
https://kodeakteam.com/tucson-and-phoenix-seo-company/tucson-web-design/

katen0k

Я во многом согласен с @deathshadow относительно flexbox и этой вычурной публикой.

Для чего-то столь же простого, как исходный вопрос ОП, я бы выбрал свойство display.

 


<!DOCTYPE HTML>


<html lang="en">


<head>


<meta charset="utf-8">


<meta content="ширина = ширина устройства,


высота = высота устройства,


начальный масштаб = 1"


name="viewport">


<title> Test document </title>


<style type="text/css">


/*<![CDATA[*/


body {


background-color: white;


color: black;


font: 100%/1.5 sans-serif;


margin: 0;


padding: 1em;


}


p {


font-size: 1em;


}


#rowblock {


display: table-row;


width: 100%;


}


#rowblock > * {


border: 1px solid black;


display: table-cell;


padding: 0 1em;


width: 33%;


}


/*]]>*/


</style>


</head>


<body>


<div id="rowblock">


<div>


<p>This group has multiple paragraphs.</p>


<p>Another paragraph so as not to make the previous paragraph a liar.</p>


</div>


<ul>


<li>a list item</li>


<li>and another</li>


</ul>


<p>A random paragraph</p>


</div>


</body>


</html>

Код (разметка): gary NB: Я все еще считаю, что блок кода, не поддерживающий форматирование, — это отстой.

~г

lopiter

К сожалению, я не разработчик WordPress, поэтому не знаю, где применить трюк CSS, который я только что узнал. Следующее: Сначала уберите фон и границу. .services-builder.style1 Затем сделайте фон для #section-home-inner быть

 background-image: repeating-linear-gradient(90deg, red 0%, red 32%, white 32%, white 34%);

Код (CSS): все три столбца должны стать красными. Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

JimmySpot

@Rokis прав, что flex-box, вероятно, ваш лучший выбор - хотя на самом деле от этого пахнет вычурной концепцией макета, которая вообще не имеет никакого чертового бизнеса на веб-сайте.

Я бы выбросил всю эту концепцию макета в мусорную корзину и начал бы с чего-то более простого, например, с плоского списка.

или полностью исключил бы цвета фона. В противном случае вы столкнетесь как с раздуванием кода, так и с кошмаром доступности. Хотя с фиксированными метрическими шрифтами и конфликтующими объявлениями размеров, 62,5% [b[LIE
(это переопределяется еще худшими 13 пикселями), статический стиль в разметке, статический скриптинг в разметке, бесконечные бессмысленные отдельные скрипты и таблицы стилей, отсутствие медиа-целей, бесконечные бессмысленные DIV просто так, бесконечные бессмысленные классы просто так, полное отсутствие чего-либо, отдаленно напоминающего правильную семантику - если вы привели что мне, как клиенту, я бы посоветовал вам выбросить всю крушение поезда из-за некомпетентности разработчиков в мусор и начать все сначала!

О чем свидетельствуют 19,4 тыс.

HTML для доставки 2,19 тыс.

открытого текста и изображений с нулевым содержанием СОДЕРЖИМОГО.

(то есть изображения должны быть в CSS, а не в разметке!) — по сути, в три-пять раз больше необходимого HTML!

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

повсюду. Следовательно, почему для этого НЕТ законной причины:

 


<body>


<div id="top">


<h1><a href="/">Transcripts Austrailia</a></h1>


<input type="checkbox" id="showHideMainMenu">


<label for="showHideMainMenu"></label>


<ul id="mainMenu">


<li><a href="/" class="current">Home</a></li>


<li><a href="/starthere">Start Here</a></li>


</ul>


<!-- #top --></div>

Код (разметка): Должно быть значительно больше:

  <body data-rsssl=1 class="home page-template-default page page-id-79 wp-custom-logo layout-fixed pre-header-style2 header-style1 header-logooverflow header-sticky"> <div id="body-core" class="hfeed site"> <header> <div id="site-header"> <div id="pre-header"> <div class="wrap-safari"> <div id="pre-header-core" class="main-navigation"> </div> </div> </div> <!-- #pre-header --> <div id="header"> <div id="header-core"> <div id="logo"> <a href="[URL='https://lumtu.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL]" class="custom-logo" alt="СтенограммыАвстралия" itemprop="logo" srcset="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL] 314w, [URL='https://lumtu.com/yti/bAccAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xLTMwMHgxNTguTNx']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png[/URL] 300w" sizes="(max-width: 314px) 100vw, 314px" /></a></div> <div id="header-links" class="main-navigation"> <div id="header-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="[URL='https://lumtu.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li><li id="menu-item-2" class=""><a href="[URL='https://lumtu.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]"><span>Start Here</span></a></li> </ul> </div> </div> <!-- #header-links .main-navigation --> <div id="header-nav"><a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a></div> </div> </div> <!-- #header --> <div id="header-responsive"><div id="header-responsive-inner" class="responsive-links nav-collapse collapse"><ul><li class="page_item page-item-79 current_page_item"><a href="[URL='https://lumtu.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li> <li class="page_item page-item-2"><a href="[URL='https://lumtu.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]">Start Here</a></li> </ul></div></div> <div id="header-sticky"> <div id="header-sticky-core"> <div id="logo-sticky"> <a href="[URL='https://lumtu.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL]" class="custom-logo" alt="СтенограммыАвстралия" itemprop="logo" srcset="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL] 314w, [URL='https://lumtu.com/yti/bAccAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xLTMwMHgxNTguTNx']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png[/URL] 300w" sizes="(max-width: 314px) 100vw, 314px" /></a></div> <div id="header-sticky-links" class="main-navigation"> <div id="header-sticky-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="[URL='https://lumtu.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li><li id="menu-item-2" class=""><a href="[URL='https://lumtu.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]"><span>Start Here</span></a></li> </ul> </div> </div><div class="clearboth"></div> <!-- #header-sticky-links .main-navigation --> </div> </div> <!-- #header-sticky --> </div> </header>

Код (разметка): ... если не считать абсолютной и полной некомпетентности и невежества со стороны тех, кто готовит эту катастрофу любым старым способом, не обращая внимания на правильное использование HTML или CSS, не говоря уже о соблюдении минимумов доступности!

Оттащите его за дровяной сарай с пистолетом .30-06, прижмите ствол к уху и обработайте его, как Старый Йеллер.

Из этого беспорядка нет НИЧЕГО, что стоило бы даже попытаться спасти.

Это вдвойне верно, если вы поймете, что там есть тег , что это за 1997 год?

Cepoga

ОП, очевидно, не может понять, как сделать коробку одинаковой высоты.

Вы правда думаете, что они смогут понять любой другой код, который вы для них публикуете? Однако он легко догадается, что 420 контролирует высоту.

Если они используют процент и добавляют больше контента в одно поле, чем в другое, это не ВСЕГДА одинаковый размер.

Сделав это таким образом, хотя я и не говорил, что рекомендую это, это будет гарантировать, что ящики останутся НЕЗАВИСИМЫМ размером, который ОП выберет для их создания как

Ритка

@ash_ash_ash Я вижу, что твое решение было таким:

 
#post-79 > .csRow {

display: -webkit-flex;

display: flex;
}
.mycolumns {

display: inherit;

-webkit-flex: 1;

flex: 1;
}

Код (CSS): Но если вы все еще рассматриваете возможность автоматической высоты в зависимости от содержимого, вы можете заменить фиксированную высоту следующим:

  .mycolumns { height: 357px !important; }

Код (CSS): Надеюсь, это поможет. Спасибо и храни Бог всегда!

Похожие темы	Дата
С чего начать в дизайне?	19.10.2024, 18:10
Типографская раскладка клавиатуры от Ильи Бирмана	19.10.2024, 18:10
Перепрофилирование постов блога в видео	19.10.2024, 18:10
Программистам слишком сложно написать макет CSS??	19.10.2024, 18:10
Панель управления Jetpack изменилась?!	19.10.2024, 18:10
4 тенденции веб-дизайна, на которые стоит обратить внимание	19.10.2024, 18:10
Проблема при связывании двух объектов внутри	19.10.2024, 18:10
SSL-сертификаты помогают или разрушают новые блоги	19.10.2024, 18:10
Адаптивная таблица — как сложить таблицу в мобильном представлении	19.10.2024, 18:10
Как стать успешным блоггером: советы начинающим	19.10.2024, 18:10

Сделать высоту всех коробок одинаковой

Kisxo

demelek

41e090

jfinister

katen0k

lopiter

JimmySpot

Cepoga

Ритка

I AM

Интересно