Question

我想在标题<img>的右侧添加<h2>（橙色圆圈）。问题是，当我缩小屏幕时，圆圈跳过标题。无论屏幕大小如何，我如何让它保持在右侧？

＆＃13;

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
}

＆＃13;

<div class="section" data-menuanchor="thirdPage">
  <div class="slide">
    <div class="main mainupp">
      <div class="myheader border"></div>
      <div class="head-text">
        <div class="row">
          <div class="col-sm-5 col-xs-2">
            <div class="post-thumb orange"></div>
          </div>
          <div class="col-sm-2 col-xs-8">
            <h2><img>ASDASD</h2>
          </div>
          <div class="col-sm-5 col-xs-2"></div>
        </div>
      </div>

＆＃13;

Answer 1

white-space: nowrap可以防止它分成2行，如果你想保持它漂亮（而不是重叠文本），你也可以将overflow: hidden和text-overflow: ellipsis添加到{{} 1}}：

＆＃13;

h2

＆＃13;

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

Answer 2

在这种情况下使用position：

img {
  margin: 10 0 0px 0px;
  /* float: right; Remove this */
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
  /* Add these */
  position: absolute;
  right: 0;
}

那应该修复。请勿删除position: relative上的.head-text。

更新了代码段

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  /* float: right; Remove this */
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
  /* Add these */
  position: absolute;
  right: 0;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
}

<div class="section" data-menuanchor="thirdPage">
  <div class="slide">
    <div class="main mainupp">
      <div class="myheader border"></div>
      <div class="head-text">
        <div class="row">
          <div class="col-sm-5 col-xs-2">
            <div class="post-thumb orange"></div>
          </div>
          <div class="col-sm-2 col-xs-8">
            <h2><img>ASDASD</h2>
          </div>
          <div class="col-sm-5 col-xs-2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

请将标签正确嵌套。

如何将div定位在标题右侧

2 个答案: