html - 用网格内容填充文本

Question

我在 CSS 中使用网格布局，我有一个跨度，底部有一个网格。我的网格的每个单元格都有一个居中的内容，我想在我的文本的左侧和右侧添加填充，以便与两侧单元格的内容对齐。我想要一个完整的 css 解决方案，但我不确定它是否可能......

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
<div class="grid-container grid-container--fill">
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
</div>

如果你想尝试一些东西，这里是一个 jsfiddle： https ://jsfiddle.net/s4Lxwrm5/

标签： htmlcsscss-grid

Answer 1

给你，伙计：

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.container {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	overflow: auto;

	background-color: grey;
}
	.container-inner {
		width: 100%;
		max-width: 1248px; /* SET YOUR MAX WIDTH */
		height: auto;
		margin: 0 auto;
		padding: 20px; /* SET YOUR PADDING */
		position: relative;
		display: block;
		overflow: auto;

		background-color: orange;
	}
		.text-container {
			width: 100%;
			height: auto;
			margin: 0 auto 20px auto;
			padding-left: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
			padding-right: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
			position: relative;
			text-align: justify;

			background-color: red;
		}
		.supporting-boxes {
			width: 100%;
			height: auto;
			position: relative;
			display: grid;
			grid-template-columns: repeat(auto-fill, 25%);

			background-color: green;
		}
			.grid-box {
				width: 80%; /* LEAVING 10% PADDING */
				height: auto;
				min-height: 200px;
				position: relative;
				justify-self: center;

				background-color: purple;
			}
				.box-content {
					width: 100%;
					height: auto;
					text-align: center;

					position: absolute;
					top: 50%;
					left: 50%;
					-ms-transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);

					background-color: pink;
				}

<div class="container">
	<div class="container-inner">
		<div class="text-container">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<div class="supporting-boxes">
			<div class="grid-box">
				<div class="box-content">
					A
				</div>
			</div>
			<div class="grid-box">
				<div class="box-content">
					B
				</div>
			</div>
			<div class="grid-box">
				<div class="box-content">
					C
				</div>
			</div>
			<div class="grid-box">
				<div class="box-content">
					D
				</div>
			</div>
		</div>
	</div>
</div>

不过，这是非常不稳定的代码，如果您要更改盒子和东西的数量，我们可能需要寻找其他解决方案。