html - 如果段落从标题开始，如何对齐段落的下一行

Question

我想沿着绿线对齐段落：

标签： htmlcss

Answer 1

你想要这样的东西吗？

.subject, .message {
  float:left;
  display:block;
}
.subject {
  width:35%;
  text-align:right;
}
.message {
  width: 65%;
  padding-top: 10px;
  left: 10px;
  position: relative;
}

<div class="subject">
  <h2>Hello this is subject</h2>
</div>
<div class="message">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio ut enim blandit volutpat. Posuere morbi leo urna molestie at elementum eu. Volutpat maecenas volutpat blandit aliquam. Ornare arcu odio ut sem nulla pharetra diam. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Egestas sed sed risus pretium quam. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. A arcu cursus vitae congue mauris rhoncus. Morbi quis commodo odio aenean sed adipiscing diam. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim.

Eros donec ac odio tempor orci dapibus. Venenatis lectus magna fringilla urna porttitor rhoncus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Eget nunc lobortis mattis aliquam. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Urna molestie at elementum eu facilisis sed odio. Arcu ac tortor dignissim convallis aenean et tortor at. Dictum sit amet justo donec. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Cras semper auctor neque vitae. Hendrerit gravida rutrum quisque non tellus orci ac. Dui id ornare arcu odio ut sem. Vitae elementum curabitur vitae nunc. Lectus quam id leo in vitae turpis massa sed. Lobortis scelerisque fermentum dui faucibus in ornare. Dui vivamus arcu felis bibendum ut tristique et egestas. Nisl suscipit adipiscing bibendum est ultricies integer. Pretium aenean pharetra magna ac placerat vestibulum.

In ornare quam viverra orci sagittis eu. Justo nec ultrices dui sapien eget. Mollis aliquam ut porttitor leo. Ullamcorper eget nulla facilisi etiam. Vestibulum sed arcu non odio euismod lacinia at quis. Amet venenatis urna cursus eget nunc scelerisque. Diam ut venenatis tellus in metus vulputate eu scelerisque. Pharetra convallis posuere morbi leo urna molestie at elementum. In nisl nisi scelerisque eu ultrices. Nibh venenatis cras sed felis eget velit. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. In ante metus dictum at tempor commodo ullamcorper a. A scelerisque purus semper eget duis at tellus. Gravida in fermentum et sollicitudin ac orci phasellus. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Tellus cras adipiscing enim eu turpis egestas pretium. Nunc id cursus metus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

Volutpat odio facilisis mauris sit amet massa vitae. Id nibh tortor id aliquet lectus proin. Sit amet porttitor eget dolor morbi non arcu risus. Pretium aenean pharetra magna ac. Tempor nec feugiat nisl pretium fusce id velit ut. Turpis egestas pretium aenean pharetra. Accumsan in nisl nisi scelerisque eu ultrices. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Potenti nullam ac tortor vitae purus faucibus. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Feugiat pretium nibh ipsum consequat. Varius duis at consectetur lorem donec massa sapien faucibus et. Lectus quam id leo in vitae.

Id aliquet lectus proin nibh nisl condimentum. Erat imperdiet sed euismod nisi. Tortor consequat id porta nibh venenatis cras. Commodo elit at imperdiet dui accumsan sit amet. Integer vitae justo eget magna fermentum iaculis eu non diam. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. In eu mi bibendum neque egestas congue quisque egestas diam. Urna nunc id cursus metus aliquam eleifend mi in nulla. Etiam non quam lacus suspendisse faucibus interdum. Malesuada nunc vel risus commodo. Faucibus purus in massa tempor nec feugiat nisl pretium fusce.</p>
</div>