1

Собственно вопрос.

.txtbox h4:after {
  content: ",";
  display: inline-block;
}
.txtbox {
  float: left;
}
.txtbox p {
  float: none;
}
.txtbox p:before {
  content: "\00ab";
  display: block;
  height: 100%;
  color: #467797;
  font-family: 'PT Sans Bold';
  font-size: 72px;
  line-height: 100%;
  width: 12%;
  float: left;
}
<div class="txtbox">
  <h4>Иванов Иван</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p>
</div>

3
  • убери float: left; из стилей
    – Grundy
    12 сен 2016 в 6:47
  • Уточните вопрос!
    – SVE
    12 сен 2016 в 6:50
  • Нужно чтобы текст не обтекал открывающую кавычку. 12 сен 2016 в 6:53

1 ответ 1

1

Вариант 1 с vh:

.txtbox h4:after {
  content: ",";
  display: inline-block;
}
.txtbox {
  float: left;
}
.txtbox p {
  float: none;
}
.txtbox p:before {
  content: "\00ab";
  display: block;
  height: 100vh;
  color: #467797;
  font-family: 'PT Sans Bold';
  font-size: 72px;
  line-height: 100%;
  width: 12%;
  float: left;
}
<div class="txtbox">
  <h4>Иванов Иван</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p>
</div>

Вариант 2 с position:

.txtbox h4:after {
  content: ",";
  display: inline-block;
}
.txtbox {
  float: left;
}
.txtbox p {
  position: relative;
  padding-left: 12%;
}
.txtbox p:before {
    content: "\00ab";
    display: block;
    height: 100%;
    color: #467797;
    font-family: 'PT Sans Bold';
    font-size: 72px;
    line-height: 100%;
    width: 12%;
    position: absolute;
    left: 0;
}
<div class="txtbox">
  <h4>Иванов Иван</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p>
</div>

Вариант 3 с table-cell:

.txtbox h4:after {
  content: ",";
  display: inline-block;
}
.txtbox {
  float: left;
}
.txtbox p {
  display:table;
}

.txtbox p:before {
    content: "\00ab";
    display: table-cell;
    vertical-align: top;
    color: #467797;
    font-family: 'PT Sans Bold';
    font-size: 72px;
    line-height: 100%;
    width: 12%;
}
<div class="txtbox">
  <h4>Иванов Иван</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p>
</div>

Вариант 4 с flex:

.txtbox h4:after {
  content: ",";
  display: inline-block;
}
.txtbox {
  float: left;
}
.txtbox p {
  display: flex;
  align-items: flex-start;
}

.txtbox p:before {
    content: "\00ab";
    display: table-cell;
    vertical-align: top;
    color: #467797;
    font-family: 'PT Sans Bold';
    font-size: 72px;
    line-height: 100%;
    width: 12%;
    padding: 0 1rem;
}
<div class="txtbox">
  <h4>Иванов Иван</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p>
</div>

1
  • Первый вариант. Но в Вашем случае высота получается слишком большой и расширяет блок. Можно ли как-то сделать, чтобы высота не превышала высоту родителя? 12 сен 2016 в 6:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.