html - 在文本上进行精确填充-6ren

html - 在文本上进行精确填充

转载作者：太空宇宙更新时间：2023-11-04 09:37:36

我很好奇如何制作 100% 正确的填充。图片上的文字必须遵循蓝线。这意味着“kvalifikationsbeskrivelse”、“Indhold”和文本必须与“Slides fra forelæsninger”保持一致。

目前我猜测 padding-left: 20px; ，但这不会是正确的。有没有一种聪明的方法可以在 CSS 中做到这一点？

最佳答案

你把标记搞得一团糟。

在投资组合部分 ( <section class="portfolio"> ) 中找到:

<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
<hr>
</div>

并用<div class="row">包裹起来像这样:

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h4 class="h4 courses">Slides Fra Forelæsninger</h4>
        <hr>
    </div>
</div>

进一步，它进入同一节点内的另一个投资组合部分(<section class="portfolio">):

<section class="portfolio">
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
</section>

将其更改为:

<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>

所以基本上只是去掉包装 <section>和 <div>标签。

使用 bootstrap 的经验法则是遵循文档的结构:

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">...</div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">...</div>
  </div>
  ...
</div>

标记损坏的原因是您反复调用 <section class="portfolio">和 <div class="container">实际上应该只调用一次。加强理论结帐Bootstrap Grid节

您可以获取代码并替换您的标记:

<!-- begin portfolio section -->
<section class="portfolio">
  PASTE THE CODE
</section>

<div class="container">
	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">

			<!-- Kursus beskrivelse -->

			<h4>Kvalifikationsbeskrivelse</h4>
			<p>
				Deltagerne vil efter kurset have et grundlag for at forstå den historiske udvikling i forhold til design som en skabende
				praksis og dets samvirken med den samfundsmæssige udvikling. Perspektivere forskellige design tilgange, og deraf følgende
				designteorier typisk båret af idealer og politiske perspektiver. Kursets arbejdsform vil også træne deltagernes evne
				til at formidle og kommunikere faglige problemstillinger. Deltagerne skal ved afslutningen af kurset kunne:
			</p>
			<ul>
				<li class="courses">Identificere forskellige designretninger og teorier i hverdags produkter og services.</li>
				<li class="courses">Reflektere over forskellige design teoriers styrker og svagheder.</li>
				<li class="courses">Anvende data, illustrationer og interaktive kvaliteter på tværs af programpakker til digital præsentation og illustration
					af et pervasive computing artefakt eller miljø.</li>
			</ul>
			<h4>Indhold</h4>
			<p>
				På trods af at de forskellige designperspektiver havde deres storhed på bestemte tidspunkter er de alle at finde i mere eller
				mindre rendyrket grad i de produkter vi omgiver os med til hverdag. Kurset vil introducere de fremherskende 'designskoler'
				(e.g. Bauhaus, Ulm, Cranbrook) og deres tænkning op gennem det 20 århundrede.
			</p>

		</div>
	</div>

	<!-- Forelæsninger slides -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="/courses/AU-pensum/designteori-og-historie/forelaesninger-slides/2art_nov2.pdf" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>

	<!-- Afleveringer -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Afleveringer Uddrag</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>


	<!-- Tekniske Øvelser -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Tekniske Øvelser</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>
</div>

关于html - 在文本上进行精确填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40205270/

文章推荐： android - arm-linux-androideabi-strip 无法重命名

文章推荐： javascript - 让浏览器专注于并行执行 selenium

文章推荐： linux - sed - 如何精确匹配行中的数字

文章推荐： java - StreamingResponseBody 返回空文件

html - 填充 :initial vs. 填充:0
padding:initial 比 padding:0 有什么优势吗？示例: textarea { padding: 0; } Hello, world! 最佳答案它们的意思是一
java - 使用 JButton 填充 JList 并使用 Jlist 上的 DoubleClick 填充 JTextField
我尝试通过按钮填充 JList，然后在先前填充的 Jlist 上使用 DoubleClick 填充 JTextField。代码: private void extractUsedVariables
jquery添加宽度+填充；
我正在尝试做 var width = ($(this).width() + $(this).css('padding-left') + $(this).css('padding-right' ))；
CSS悬停没有文本边距/填充
我在导航中添加了悬停效果，遗憾的是悬停也影响了上面的文字。如何在不影响文本位置的情况下向导航添加悬停？可悲的是，我找不到解决这个问题的方法。 HTML 模板:http://projects.help
F# printf 填充
我是 F# 初学者，下面代码中的 %-5s 和 %5s 有什么作用？我认为它提供了空间填充，但我不确定它是如何填充的？ printfn "%-5s %5s" "a" "b" 当我尝试 prin
Sails.js 填充 where
我需要选择带狗的用户(带 type 等于“狗”的宠物) var User = Waterline.Collection.extend({ identity: 'user', attribute
excel - 如何使用具有一系列值的自动填充/填充
我一直在尝试让 Excel 在一组列上应用公式，然后将模式扩展到整个行集。这导致了以下代码: For i = 0 To avgsheetNames.Count - 1 If Contains(CSt
Flutter TextButton 填充
随着 Flutter 2.0 的发布，FlatButton已被替换为 TextButton . 因此，填充属性不再直接可用，而是作为 ButtonStyle属性(property)。我的问题是，我该
wpf - WPF中的对接/填充
这似乎是一个简单的问题，但我已经尝试了一个小时，似乎无法弄清楚。我要做的就是用 Canvas 填充 MainWindow。我找不到任何允许这样做的属性，我能想到的唯一方法是设置 Canvas.Wid
iPhone 添加了奇怪的左边距/填充
这是a website具有移动 View 。网站宽度为 640 像素，但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。我添加了视口(viewport)元: 主体 C
java - GridBagLayout 填充
我正在使用 GridBagLayout到(当前)显示两行。我知道这种布局对于这项任务来说太过分了，但我正在努力学习如何使用它。问题是我已将两个面板添加到两个单独的行中，并且内容周围存在巨大差距(请参见
javascript - 单击更改谷歌地图多边形颜色/填充
我有以下代码已传递给我并创建多边形: var map; function initialize() { var myLatlng = new google.maps.LatLng(-36.4
java - 填充 JPanel
我在 Jpanel 中有一些项目，然后将其推到顶部并用作基本搜索引擎的工具栏。我遇到一个问题，因为没有足够的空间，所以我的最后一个组合框没有显示。但是，左侧有很多空白空间，我需要移动所有内容来填充 J
c++ - 如何为二进制图像中的形状重新着色以进行索引(填充)？
我创建了带有阈值的二进制图像。如下图所示如何改变白色形状的颜色以使其可索引？到目前为止，这是我的代码: void threshold() { cv::Mat src_8uc3_img = c
java - 填充 JTable
我有一个 JTable，我想知道是否有更好的方法来填充它，这是我的代码: //Metodo para llenar un jtable con datos de la base public stat
python - 从卷中裁剪空数组(填充)
我想要做的是裁剪一个卷以删除所有不相关的数据。例如，假设我有一个 100x100x100 的体积，其中填充了 0，但其中的 50x50x50 体积则填充了 1。如何从原始体积中获得裁剪后的 50x50
Java ArrayList 填充
因此，我正在创建一种对一组数字进行洗牌的方法，其想法是创建这些数字的总体。因此，我创建了一个循环，对数字进行洗牌，然后将其添加到数组列表中，但是经过一些调试语句后，我发现它确实对数字进行洗牌，但只将最
c# - 静态集合是否保证在另一个类使用它之前被初始化/填充？
假设我有这两个类: public class A where T : IEntityWithID, new() { private static EntityInfo entityInfo =
C 中大整型加法中的进位数字/填充
我正在尝试添加用户输入的两个大整数作为字符串。当两个输入字符串的长度不同时，我尝试用零填充较短的数字，但它不起作用。因此，如果我输入 456 和 7，它会给出 3，前面有一些随机字符。感谢您的任何建议
arrays - 填充 UITableViewController
这是我将内容打印到表格 View 的代码 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: Index

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在文本上进行精确填充