Question

是否可以将底部边框移动到侧面（在我的示例中为右侧）。我的页面左侧有图片，我想在这些单张图片的右侧有<h3>个标题。另外，我想用border-bottom属性强调这些标题。此边框应该是网站长度的66％，它应该从<h3>开始，只向右移动（不穿越图片）。

我的HTML：

<figure>
  <img src="Fotky/Neonka.jpg" alt="Tetra neonová"/>
  <figcaption>Tetra neonová</figcaption>
</figure>
<h3>Tetra Neonová</h3>

我的CSS是：

figure {
    display: block;
    float: left;
}
figcaption { 
    text-align: center;
}
h3 {  
  border-bottom: solid;
  width: 66%;
}

感谢您的帮助。

Answer 1

您需要使用float: left;将h3设为width: 66%，并使用h3::after伪元素。

此解决方案的主要优点是可以为此元素的任何属性设置动画。尝试将鼠标移到此标题上。

body   {
  background-color: rgba(7,17,21,1.00);
  font-family:Cambria, Hoefler Text, Times, Times New Roman, serif;
  color: white;
  width: 100%;
  padding: 0;
  margin: 0;
}

.StickyTop {
  margin-top: -20px;
  width: 100%;
  z-index: 1;
}

h1.MainHeader   {
  background-color: black;
  text-align: center;
  height: 56px;
}

.MenuBar   {
  margin-top: -21px;
  text-align: center;
  background-color: rgba(7,17,21,1.01);
}
.MenuBar a {
  color: lightblue;
}
figure   {
  width: 150px;
  float: left;
  margin: auto 0;
}
figure img {
  width: 100%;
}
figcaption   { 
  text-align: center;
}
h3 {
  width: calc(100% - 150px);
  text-align: left;
  float: left;
  margin-top: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
h3:after {
  content: " ";
  background: #0000eB;
  width: 66%;
  height: 2px;
  display: block;
  position: relative;
}
p {
  width: calc(100% - 160px);
  float: left;
  margin: 0;
  padding: 0 10px;
  text-align: justify;
  box-sizing: border-box;
}

<div class="StickyTop">
      <h1 class="MainHeader">Rybičky</h1> 

     <div class="MenuBar">
      <a  class="button1" href="#">Hlavní stránka</a>
      <a  class="button2" href="#">Akvárium</a>
      <a  class="button3" href="#">Rostliny</a>
      <a  class="button4" href="#">odkazy</a>
     </div>
    </div>
<figure>
  <img src="https://4.bp.blogspot.com/-7GEV-jl3XPQ/VjqUuXtUU8I/AAAAAAAAesM/SeF8ECLt3qk/s1600/Cardinal-Tetra.jpg" alt="Tetra neonová"/>
  <figcaption>Tetra neonová</figcaption>
</figure>
<h3>Tetra Neonová</h3>
<p>Here comes the descripton.<br>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet<br> Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor ametHere comes the descripton. Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet<br> Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor ametHere comes the descripton. Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet<br> Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>

Answer 2

figure{
  display: inline-block;
  float: left;
  border: 1px solid #000;
}
img{
  max-width: 100px;
}
figcaption   { 
  text-align: center;
}
h3 {  
  display: inline-block;
  border-bottom: solid;
  width: 66%;
  float: left;
}

通过在显示属性中提及内联块，将图形和h3对齐为内联。显示块水平拉伸元素并删除与该元素内联的其他元素。

此外，您需要将h3对齐为内联块，因为默认情况下，h3是块级元素。

检查这个小提琴：Fiddle

Answer 3

以下是我的全部代码：

<!DOCTYPE html>
<html>
<head>
      <title>Rybičky a další obyvatelé akvária</title>
      <link rel="stylesheet" href="Rybicky.css" />

</head>
<body>
  <div class="StickyTop">
      <h1 class="MainHeader">Rybičky</h1> 

     <div class="MenuBar">
      <a  class="button1"href="#"Hlavní stránka</a>
      <a  class="button2"href="#">Akvárium</a>
      <a  class="button3"href="#">Rostliny</a>
      <a  class="button4"href="#">odkazy</a>
     </div>
    </div>
     <br style="clear:both">
      <figure>
       <img src="Fotky/Neonka.jpg" alt="Tetra neonová"/>
       <figcaption>Tetra neonová</figcaption>
      </figure>
      <h3>Tetra Neonová - <i>Paracheirodon innesi</i></h3>
      <br><br>
        <p>Description of the fish etc. </p>





</body>
</html>

和我的css：

  body   {
 background-color: rgba(7,17,21,1.00);
 font-family:Cambria, Hoefler Text, Times, Times New Roman, serif;
 color: white;

 }

.StickyTop    {
margin-top: -20px;
width: 100%;
z-index: 1;
}

h1.MainHeader   {
    background-color: black;
    text-align: center;
    margin-left: -12px;
    margin-right: -12px;
    height: 56px;

}

.MenuBar   {

  margin-top: -21px;
   text-align: center;
  background-color: rgba(7,17,21,1.01);
}
 figure   {
  width: 150px;
  float: left;
  margin: auto 0;
 }
 figure img {
width: 100%;
 }
 figcaption   { 
 text-align: center;
 }
 h3{
width: 66%;
text-align: left;
float: left;
margin-top: 0;
padding: 0 10px;
box-sizing: border-box;
 }
 h3:after {
content: " ";
background: #0000eB;
width: 66%;
height: 2px;
display: block;
position: relative;
 }

将底部边框延伸到右侧

3 个答案: