Procedural style
mixed mysqli_query ( mysqli $link , string $query [, int $resultmode = MYSQLI_STORE_RESULT ] )
Вы увидите переменные $link
и $query
.
Это означает, что вам нужно передайте функцию действительный ресурс ссылки mysqli, а также запрос, который вы хотите выполнить. Это позволяет функции знать, какое установленное соединение с сервером использовать.
Ресурс ссылки может быть создан с использованием:
Только процедурный стиль: идентификатор ссылки, возвращаемый mysqli_connect ( ) или mysqli_init ()
blockquote>, и пример того, как это сделать, можно найти на вышеупомянутой странице руководства.
Переполнение в этом контексте ничего не значит без определения высоты , после которой содержимое должно перетекать над . Проблема ( или преимущество, в большинстве случаев ) с flex заключается в том, что блоки будут расти, чтобы соответствовать «самому большому» контенту, или, скорее, flex (отсюда и название). Вам, вероятно, понадобится Javascript для этого, или вам нужно будет определить максимальную высоту для детей.
Ниже приведен пример вашего кода с max-height
, примененным к детям;
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: scroll;
}
.child1, .child2, .child3{
max-height: 250px;
overflow: auto;
}
<div class="parent">
<div class="child1">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="child2">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
</div>
Если вы заранее знаете желаемую высоту ваших гибких детей, использование свойства max-height
является самым чистым решением, изначально предоставленным Flexbox, как и предложил @Lewis.
Если вам нужно более детальное управление, рассмотрите возможность использования модуля макета CSS Grid. Если вы поменяете существующий код с помощью приведенного ниже фрагмента и примените его к разметке, вы увидите минималистичное воспроизведение макета, которого вы пытаетесь достичь.
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
}
.parent > * {
border: 2px solid black; // added for clarity
grid-row-start: 1;
grid-row-end: 4;
}
.child2 {
overflow-y: scroll;
}
Вы устанавливаете .parent и высоту, например, max-height: 150px;
Я хочу, чтобы один из дочерних элементов дисплея: flex; подгонять высоту к остальным.
blockquote>Предположим, вы хотите, чтобы зеленая секция (
child3
) имела наибольшую высоту:
- убедитесь, что у вас есть
align-items: stretch
(по умолчанию так что не переопределяйте это) - это гарантирует, что каждый строки изгибает дочерний элемент до максимальной высоты изгибает дочерний элемент.- обернуть содержимое других разделов (
child1
иchild2
) в абсолютно позиционированный элемент .- сделайте этот элемент-обертку флексбоксом колонки , чтобы получить переполнение прямо на желтой секции .
См. Демонстрацию ниже:
<час>.parent { display: flex; flex-direction: row; flex-wrap: nowrap; /*align-items: baseline;*/ } .child1 { background-color: red; align-self: stretch; width: 25%; min-width: 25%; max-width: 25%; } .child2 { background-color: yellow; min-height: 0; min-width: 0; overflow: auto; margin: 0 15px; width: calc(50% - 30px); max-width: calc(50% - 30px); display: flex; flex-direction: column; flex-shrink: 1; } .child3 { background-color: green; width: 25%; min-width: 25%; max-width: 25%; } .child2 .tabl { flex-shrink: 1; min-height: 0; overflow: auto; /* changed to auto */ } .child1, .child2, .child3 { /* ADDED */ position: relative; } .child-wrap { /* ADDED */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; }
<div class="parent"> <div class="child1"> <div class="child-wrap"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p></div> </div> <div class="child2"> <div class="child-wrap"> <div class="info"> <h2>Element</h2> </div> <div class="tabl"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> </div> <div class="footer"> <button class="btn">Some button</button> </div> </div> </div> <div class="child3"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> </div> </div>
Предположим, вы хотите либо левой или правой секций, чтобы иметь максимальную высоту - в этом случае используйте вышеупомянутое абсолютное позиционирование только для среднего желтого элемента - см. Демонстрацию ниже, где самый высокий из левый или правый элементы определяют высоту всей обертки
parent
:
[1111 ].parent { display: flex; flex-direction: row; flex-wrap: nowrap; /*align-items: baseline;*/ } .child1 { background-color: red; align-self: stretch; width: 25%; min-width: 25%; max-width: 25%; } .child2 { background-color: yellow; min-height: 0; min-width: 0; overflow: auto; margin: 0 15px; width: calc(50% - 30px); max-width: calc(50% - 30px); display: flex; flex-direction: column; flex-shrink: 1; } .child3 { background-color: green; width: 25%; min-width: 25%; max-width: 25%; } .child2 .tabl { flex-shrink: 1; min-height: 0; overflow: auto; /* changed to auto */ } .child1, .child2, .child3 { /* ADDED */ position: relative; } .child-wrap { /* ADDED */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; }
<div class="parent"> <div class="child1"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> </div> <div class="child2"> <div class="child-wrap"> <div class="info"> <h2>Element</h2> </div> <div class="tabl"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> <p>Some element four</p> </div> <div class="footer"> <button class="btn">Some button</button> </div> </div> </div> <div class="child3"> <p>Some element one</p> <p>Some element two</p> <p>Some element three</p> </div> </div>
0ответ дан kukkuz 18 March 2019 в 13:55поделиться