Вывод содержимого «for» не может быть автоматически заключен в «div» - PullRequest
Новая
       7

Вывод содержимого «for» не может быть автоматически заключен в «div»

0 голосов
/ 26 апреля 2020

Содержимое вывода «span» с помощью «for» не может автоматически переноситься в «div».

введите описание изображения здесь

Это первое изображение в изображение. Ниже приведен общий контент «span», который отображается нормально.

Я имею в виду, ширина должна быть 200px, а содержимое, обозначенное знаком, должно быть внутри (как на рисунке ниже). Теперь все наоборот.

Код такой: 

 <!DOCTYPE html>
<html>
<body>

<?php
$cars = array("Volvo", "BMW", "Toyota", "1sss", "2ddd", "3ddd", "4fff", "sdfs");
$ar = count($cars);

echo "<div style=\"background:#ccc; max-width:200px;height:100px; margin-top: 20px;\">";    
for($x = 0; $x < $ar; $x++) {
    echo "<span style=\"max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;\">".$cars[$x]."</span>";
}

echo "</div>";
?>


<div style="background:#ccc; max-width:200px;height:100px; margin-top: 20px;display:block;">

<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>
<span style="max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;">Volvo</span>




</div>

</body>
</html>

1 Ответ

0 голосов
/ 27 апреля 2020

Это то, что вы хотите? Я удалил встроенный стиль и добавил их в тег <style>. 

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background:#ccc; max-width:200px; height:100px; margin-top: 20px;
}
span {
    max-width:200px; margin:1px; padding: 2px; border: 1px solid yellow;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content:space-evenly;
    align-content: flex-start;
    flex:1 1 auto;
}
.flex-item {
}
</style>
</head>
<body>

<?php
$cars = array("Volvo", "BMW", "Toyota", "1sss", "2ddd", "3ddd", "4fff", "sdfs");
$ar = count($cars);

echo "<div class='flex-container'>";
for($x = 0; $x < $ar; $x++) {
    echo "<span classe='flex-item'>".$cars[$x]."</span>";
}

echo "</div>";
?>

<div class="flex-container">

<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>
<span>Volvo</span>

</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...