Метка H3 и свернутый DIV рушатся

ProgramBox

Метка H3 и свернутый DIV рушатся

Post author:admin
Запись опубликована:16 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

У меня проблема в том, что мой заголовок H3 и плавающий DIV (изображение) разрушаются, если я добавляю цвет нижней границы или фона в заголовок H3; и я не могу их разделить;

Я попробовал 2 — ю версию — если я поставлю Display:Flex на заголовок H3 — тогда возникнет новая проблема-Заголовок перемещается слишком далеко влево;

Дисплей: Версия блока:

     .layout {
        max-width:600px;
        margin: auto;
        border: 1px dashed blue;
        width:auto;
    }
    p, h3  {
        max-width:400px;
        margin: auto;
        border: 1px solid violet;
        width: auto;
    }
p {border: none;}
p   p, h3   p {
    margin-top: 10px;
}
.box {
    width:150px;
    height: 150px;
    float: right;
    border: 2px solid green;
}
h3 {
    color: red;
    border-bottom: 3px solid blue;
    background: yellow;
    display:block;
}
.image {
    background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

 <div class="layout">


<div class="box">
    <div class="image"></div>
</div>
<h3>Article Title Header</h3>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>

<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>




</div>

Дисплей: Версия FLEX ниже:

     .layout {
        max-width:600px;
        margin: auto;
        border: 1px dashed blue;
        width:auto;
    }
    p, h3  {
        max-width:400px;
        margin: auto;
        border: 1px solid violet;
        width: auto;
    }
p {border: none;}
p   p, h3   p {
    margin-top: 10px;
}
.box {
    width:150px;
    height: 150px;
    float: right;
    border: 2px solid green;
}
h3 {
    color: red;
    border-bottom: 3px solid blue;
    background: yellow;
    display:flex;
}
.image {
    background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

 <div class="layout">


<div class="box">
    <div class="image"></div>
</div>
<h3>Article Title Header</h3>
<p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>

<p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>




</div>

Ответ №1:

Почему вы не используете свойство CSS flex

Почему вы не даете при попытке свойства CSS flex для достижения своей цели? Flex безопасен и интересен для такой сложности. Здесь я реализую гибкую версию решения вашей проблемы.

  .layout {
      max-width:600px;
      margin: auto;
      border: 1px dashed blue;
      width:auto;
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
  }
  p, h3  {
      max-width:400px;
      margin: auto;
      border: 1px solid violet;
      width: auto;
  }
  p {border: none;}
  p   p, h3   p {
      margin-top: 10px;
  }
  .box {
      width:150px;
      height: 150px;
      border: 2px solid green;
  }
  h3 {
      color: red;
      border-bottom: 3px solid blue;
      background: yellow;
      display:flex;
  }
  .image {
      background: violet;
      margin: 10px auto;
      width: 80%;
      height: 80%;
  }

 <div class="layout">
  <div class="box">
      <div class="image"></div>
  </div>
  <div>
      <h3>Article Title Header</h3>
      <p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), 
      </p>

        <p>
        With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.
        </p>
   </div>
</div>

Ответ №2:

Это то, чего ты хочешь?

 .layout {
  max-width:600px;
  margin: auto;
  border: 1px dashed blue;
  width:auto;
}
    
p   p, 
h3   p {
  margin-top: 10px;
}

.box {
  width:150px;
  height: 150px;
  float: right;
  border: 2px solid green;
  margin-left: 20px
}

h3 {
  color: red;
  border-bottom: 3px solid blue;
  background: yellow;
  display:block;
}

.image {
    background: violet;
    margin: 10px auto;
    width: 80%;
    height: 80%;
}

 <div class="layout">
  <h3>Article Title Header</h3>
  
  <div class="box">
    <div class="image"></div>
  </div>
  <p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
  <p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
</div>

ОБНОВЛЕНИЯ: Решение CSS-сетки, вот с чем я свернулся p DIV .

 .layout {
  max-width:600px;
  margin: auto;
  border: 1px dashed blue;
  display: grid;
  grid-template-columns: 1fr 150px; 
  grid-template-rows: auto; 
  grid-template-areas: "title title" "para box";
  gap: 20px;
}
    
h3 {
  color: red;
  border-bottom: 3px solid blue;
  background: yellow;
  grid-area: title; 
  margin: 0
}

.para {
  grid-area: para; 
}

p {
  margin: 0;
}

p   p {
  margin-top: 15px;
}

.box {
  grid-area: box;
  height: 150px;
  border: 2px solid green;
}


.image {
    background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}

 <div class="layout">
  <div class="box">
    <div class="image"></div>
  </div>
  <h3>Article Title Header</h3>
  <div class="para">
    <p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>
    <p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
  </div>
</div>

1. Я думаю, что вы поменяли местами заголовок / изображение; это было бы хорошо, но для моей ситуации — сложно реализовать; Я использую макет с полем Drupal — и я либо получаю 1 поле — Изображение, 2 поля-Тело; или наоборот, но почти невозможно изменить тег H3 из поля тела на другое поле — изображение;

Ответ №3:

Они перекрываются друг с другом, потому что есть float: left для .box , но нет никакого float свойства для h3 или p

есть несколько способов это исправить!

вы можете действовать как адаптивный дизайн и сделать для них 2 колонки (я предлагаю это решение), вы можете прочитать об этом подробнее здесь.

Или вы можете добавить свой заголовок и абзацы в другой div в качестве контейнера для левой стороны и объявить float: left для него (вы можете использовать оба left или right для .box в соответствии с вашей работой):

 .layout {
        max-width:600px;
        margin: auto;
        border: 1px dashed blue;
        width:auto;
    }
    p, h3  {
        max-width:400px;
        margin: auto;
        border: 1px solid violet;
        width: auto;
    }
p {border: none;}
p   p, h3   p {
    margin-top: 10px;
}
.box {
    width:150px;
    height: 150px;
    float: right;
    border: 2px solid green;
}
h3 {
    color: red;
    border-bottom: 3px solid blue;
    background: yellow;
    display:block;
}
.image {
    background: violet;
margin: 10px auto;
width: 80%;
height: 80%;
}
.left-side {
    float: left; /* or float: right; */
}

 <div class="layout">
    <h3>Article Title Header</h3>
    <div class="box">
        <div class="image"></div>
    </div>
    <div class="left-side">       
        <p>Rome (Italian and Latin: Roma [ˈroːma] (About this soundlisten)) is the capital city and a special comune of Italy (named Comune di Roma Capitale), </p>

        <p>With 2,860,009 residents in 1,285 km2 (496.1 sq mi),[1] it is also the country's most populated comune. It is the third most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p>
    </div>
</div>

1. Я исправил вопрос, чтобы удалить <style> теги из CSS фрагмента стека. Возможно, вы захотите сделать то же самое со своим фрагментом ответа.

2. @Alohci Я просто скопировал фрагмент вопроса для ответа и не понял этого! , спасибо, что дали мне знать 🙂

3. С помощью float вы, вероятно, сможете это сделать, если вставите весь абзац; когда я использую только тег H3, а статья намного длиннее, я получаю 2 поплавка и статью между ними, и это больше не похоже на заголовок;

4. вы хотите, чтобы заголовок был на вершине их обоих? нет проблем , я отредактировал фрагмент, взгляните! единственное, что я изменил, — это расположение h3 из предыдущего кода.

Метки: Метка H3 и свернутый DIV рушатся