Question

我想将文字发送到右侧，如下图所示，但是当我想发送时。它不起作用我可以解决它吗？我的HTML看起来像这样。如果有人可以帮助我，我会很感激

这是HTML结构和CSS：

div#mapdiv2 {
  width: 512px;
}

div#map {
  width: 512px;
}

div#panodiv {
  float: left;
  width: 50%;
}

div#panodiv2 {
  width: 512px;
}

div#mapdiv2 h2,
div#map h2,
div#panodiv2 h2,
div#pano h2 {
  font-size: 15px;
}

div#mapdiv2 p,
div#map p,
div#panodiv2 p,
div#pano p {
  font-size: 11px;
}

div#pano {
  width: 512px;
}

div#mapdiv2 img,
div#map img,
div#panodiv2 img,
div#pano img {
  width: 10%;
}

<div class="content_feactures">
  <h1>Feacture</h1>
  <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p>
  <div class="wrap_feactures">
    <div class="wrap_feactures_content">
      <div id="mapdiv">
        <div id="mapdiv2">
          <img src="img/check.png">
          <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
        </div>
        <div id="map">
          <img src="img/check.png">
          <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
        </div>
      </div>
      <div id="panodiv">
        <div id="panodiv2">
          <img src="img/check.png">
          <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
        </div>
        <div id="pano">
          <img src="img/check.png">
          <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

这是我试图实现的目标

Answer 1

您的h2和p默认显示为：block，这意味着它将占用其父级的100％宽度。

最简单的解决方案是用一个类将div中的h2和p包装起来，并将flex指向父母：

<div id="pano">
    <img src="img/check.png">
    <div class="wrapper">
        <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
        <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
    </div>
</div>

然后是CSS：

#pano {
    display: flex;
    width: 50%;
    justify-content: center;
    align-content: center;
    text-align: left;
}

#pano img {
    width: 100px; //Or what ever you want
}

#pano .wrapper {
    flex: 1;
}

重复其他div。

Answer 2

您可以在display:inline-block; CSS中添加<img>并尝试以下内容：

<div id="mapdiv2">
                <img src="img/check.png">
                <div class="special">
                <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
                <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
                </div>
</div>

和

.special{
  width: 80%;
  display:inline-block;
}

使用宽度和边距，直到获得所需的结果

Answer 3

我的建议是在div中说出文本或同时给出一个类

<div id="map">
    <img src="img/check.png">
    <div class="text" 
    <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
    </div>
</div>

<强> CSS

div#map img {
    width: 10%;
    float: left;
}
div#map .text {
    width: 90%; /*or any width*/
    float: rigth;
}

使用浮动将它们引导到您想要它们的位置这应该工作

如何用css将文本发送到右侧？

3 个答案: