Как сделать сетку 3x2?

ProgramBox

Как сделать сетку 3×2?

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

#html #css #grid

#HTML #css #сетка

Вопрос:

У нас есть это прямо сейчас, но это должно быть так:

https://postimg.org/image/cw2e572zh/

Я делаю это для школы, и я не могу понять, что столбцы продолжают быть 2×3, а не 3×2.

http://prntscr.com/crc7ln

 <!DOCTYPE HTML>  
<html>
<head>  
<meta charset=utf-8>  
<title>HTML CSS exercise - create a CSS Grid</title>  
  
</head>  
<body>  
<div class="container">  
       <div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
</div>  

</body>  
</html>

 /* CSS */

.row {
   float: left;
   position: relative;
   box-sizing: border-box;
   width: 24%;
   padding-left: 10px;
}
	
.col1 {
   left: 5px;
   border: 2px solid black;
   margin-bottom: 10px;
}
    	
.col2 {
   left: 15px;
   border: 2px solid black;
   margin-bottom: 20px;
}
    	
.col3 {
    left: 25px;
    border: 2px solid black;
}
    	
body {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 90%;
    background-color: #e7e7de
}

Ответ №1:

Здесь вы идете, старайтесь избегать поплавков, поскольку они, кажется, иногда портят поток вашего div. Я применил 24% к столбцам, а не к строке, также я убрал повторяющееся объявление стилей. Я бы предложил поместить один и тот же класс в столбцы, а не col1 , col2 и col3

 <!DOCTYPE HTML>  
<html>
<head>  
<meta charset=utf-8>  
<title>HTML CSS exercise - create a CSS Grid</title>  
<style>
	.row {
		box-sizing: border-box;
		padding-left: 10px;
	}

	
	.col1, .col2, .col3 {
		left: 5px;
		border: 2px solid black;
		margin-bottom: 10px;
		display: inline-block;
		padding: 5px;
		width: 24%;
	}
  
	body {
		border-width: 0px;
		padding: 0px;
		margin: 0px;
		font-size: 90%;
		background-color: #e7e7de
}
</style>  
</head>  
<body>  
<div class="container">  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
</div>  

</body>  
</html>

Ответ №2:

Вы понимаете, что у вас есть 2 divs с 3 divs в нем… Довольно логично, что у вас тогда 2×3, а не 3×2, возможно, вы хотите 3 divs с 2 divs в них?

1. мы исправили это, большое спасибо! (мы новички в html / css, поэтому: P) спасибо! : D

2. Приятно слышать, всегда пожалуйста. Поскольку это исправило это для вас, вы должны отметить мой ответ как решение, чтобы люди знали, что этот вопрос решен. Удачи 🙂

3. Это была проблема стиля, а не проблема HTML, см. Мой Ответ для решения

Ответ №3:

Примените этот стиль, сократив объем кода.

 <style>  
.row {
    border:1px solid red;
    float:left;  
}
.column{
  float:left;
  margin:10px;
  border:1px solid black;
  width:24%;
}
.clear{clear:both;}

Со следующей структурой HTML

 <div class="container">
    <div class="row">
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
        <div class="column">
            <p>loren ipsum</p>
        </div>
    </div>
</div>

Вопрос:

Ответ №1:

Ответ №2:

Комментарии:

Ответ №3:

Вам также может понравиться

Наследование Iron-Router RouteController: почему хук родительского контроллера запускается раньше дочернего?

SPA и простой серверный интерфейс одного источника с Oauth2 — способ использования http-сеанса

Добавьте 0 в следующую строку столбца после последней точки данных