gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 09:37:36 26 4
gpt4 key购买 nike

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

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

最佳答案

你把标记搞得一团糟。

  1. 在投资组合部分 ( <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>
  1. 进一步,它进入同一节点内的另一个投资组合部分(<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>

Screenshot of working solution

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com