将html圆放在div和段落标记旁边

时间：2018-06-29 10:00:36

标签： html css

我有这个html代码，它由一个圆形和2个文本div和p标签组成。我要完成的工作如下图所示。我尝试在我的圈子以及h1和p中添加一个内联代码块，但最终结果却很奇怪。我不确定我是否做对了。任何帮助将不胜感激。

enter image description here 

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: inline-block;
}

h1 {
  font-weight: 700;
  color: #053740;
  font-size: 30px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  display: table;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
<div class="header-step ">
  <div class="circle">1</div>
  <div style="display:inline-block;">
    <h1>Some very very long header</h1>
    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest
      idea where the wood and river in quedtion were.</p>
  </div>
</div>

6 个答案:

答案 0 :(得分：1)

您可以使用flex来实现。

  • 将display: flex;设置为父级的header-step
  • 使用已设置内联flex: 0 85%;的{​​{1}}
  • 删除display: inline-block;中的top-margin 

h1
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: inline-block;
  margin-right: 10px;
}
h1{
    font-weight: 700;
    color:#053740;
    font-size:30px;
}
p{
     font-size: 18px;
     color: #919191;
 }
 .header-step{
    display: table;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top:25px;
    display: flex; /* Added */
}
h1 {
  margin-top: 0;/* Added */
}

答案 1 :(得分：1)

这应该有效。

.text {
  width: calc(100% - 50px);
  vertical-align:top;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: inline-block;
  vertical-align:middle;
  position: relative;
  top: 10px;
  left: -5px;
}
h1{
    font-weight: 700;
    color:#053740;
    font-size:30px;
}
p{
     font-size: 18px;
     color: #919191;
 }
 .header-step{
    display: table;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top:25px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class= "header-step ">
    <div class="circle">1</div>
    <div style="display:inline-block;" class='text'>
    <h1>Some very very long header<h1>
            <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting </br>and
                fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,
                </br>and he had indeed the vaguest idea where the wood and river in quedtion were.</p>
</div>
</div>
</body>
</html>

答案 2 :(得分：1)

您可以使用CSS Flexbox来做到这一点。

在这里，我已将display: flex添加到容器.header-step，并将flex-shrink: 0添加到.circle，以确保其形状。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: block;
  margin-right: 1em;
  flex-shrink: 0;
}

h1 {
  margin-top: 0;
  font-weight: 700;
  color: #053740;
  font-size: 30px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  display: flex;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
<div class="header-step ">
  <div class="circle">1</div>
  <div style="display:inline-block;">
    <h1>Some very very long header</h1>
    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest
      idea where the wood and river in quedtion were.</p>
  </div>
</div>

答案 3 :(得分：1)

如果您想通过对代码的最小改动来实现它，我想告诉您inline-block背后的逻辑。

ParentDIV显示：阻止

Child1DIV已显示：内联块

Child2DIV显示：内联块

Child1DIV和Child2DIV将“内联”在同一块“ ParentDIV”上

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: inline-block;
}

h1 {
  font-weight: 700;
  color: #053740;
  font-size: 30px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  display: table;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
.circle-text{

    display:inline-block;
}
<div class="header-step ">
  <div class="top-header">
    <div class="circle">1</div>
    <div class="circle-text"><h1>Some very very long header</h1></div>
  </div>

    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest
      idea where the wood and river in quedtion were.</p>
</div>

答案 4 :(得分：1)

尝试使用position:absolute元素，并为文本框添加一些padding-left值。

* {
  box-sizing: border-box;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  position: absolute;
  left: 0;
  top: 0;
}

.box {
  float: left;
  padding-left: 65px;
}

h1 {
  font-weight: 700;
  color: #053740;
  font-size: 30px;
  margin: 5px 0 10px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  position: relative;
  display: table;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <div class="header-step ">
    <div class="circle">1</div>
    <div class="box">
      <h1>Some very very long header
        <h1>
          <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting </br>and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,
            </br>and he had indeed the vaguest idea where the wood and river in quedtion were.</p>
    </div>
  </div>
</body>

</html>

答案 5 :(得分：1)

您可以为此使用:before伪类，结合数据属性，它变得非常强大。请注意，我在h1元素上添加了一个本应具有圆圈的类。

h1{
        font-weight: 700;
        color:#053740;
        font-size:30px;
    }
h1.circle:before{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        background: #16444d;
        display: inline-block;
        content:attr(data-num);
        margin-right:0.5em;
}
<h1 class="circle" data-num="1">Some very very long header</h1>
<h1 class="circle" data-num="2">Second header</h1>

相关问题
最新问题