将底部边框延伸到右侧

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

你需要将h3设为float: left; 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是块级元素。

检查这个小提琴： 小提琴

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;
 }