3
Мне дали следующую разметку, что не может изменить.Как изменить порядок элементов и/или поместить текст вокруг изображения?
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Поэтому цель состоит в том, чтобы получить HTML для отображения в соответствии со следующим фрагментом:
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
}
.container > .description {
max-width: 100%;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}<div class="container">
<h3>Some Header the is in the wrong place</h3>
<div class="image">
<img src="some image"/>
</div>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>Примечание в приведенном выше фрагменте кода я переместил <h3> тег к началу внутри контейнера, и все в порядке и денди. Однако я не могу изменить это в своем сценарии. Я могу использовать jQuery/JavaScript для этого, но я действительно этого не хочу и хотел бы использовать только CSS.
Я попытался использовать подход flexbox, чтобы получить его для заказа, но затем я не могу заставить текст обернуться вокруг нижней части изображения, например.
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
order: 4;
}
.container > .specials-info {
order: 2;
}
.container > .description {
max-width: 60%;
text-align: left;
order: 3;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
order: 1;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>В целом есть способ достичь Отрывок 1 с из изменения исходного HTML и без использования JavaScript?
Edit 1
Просто чтобы прояснить немного в изображении ниже слева является Отрывок 1. Это то, что я хочу, чтобы в конечном итоге (но разметка отличается тем, что <h3> тег выше). Справа находится Snippet 2, как можно ближе, без редактирования разметки (которую я не могу сделать)/с помощью JavaScript (я могу сделать, но скорее буду использовать только CSS).
Обратите внимание, что я использовал flexbox для изменения порядка элементов, но в этот момент я не могу использовать float в контейнере изображений.
Редактировать 2
немного больше разъяснений (извинений)
- Заголовок (Н3) должен сидеть в верхней и принимать 100% от ширины. (без обертывания, просто добавив изображение вниз).
- Изображение будет составлять 45% от ширины, но будет меняться по высоте в зависимости от различных вариантов использования.
- Содержание описания будет x no из p-тегов с различным содержимым.
Трудно точно сказать, что разница между ними. Может быть, используйте образы заметок или покажите нам скриншоты того, что вы хотите против того, что у вас есть? – TylerH
@TylerH Обратите внимание, что в первом фрагменте текст обернут вокруг изображения. Во втором фрагменте это не так, он действует, как изображение находится в совершенно другом столбце. –
@ManojKumar Да, но для того, чтобы быть ясным, я хочу, чтобы * OP * предоставлял более подробную информацию, поэтому нет путаницы в том, что он хочет. – TylerH