jquery 如何使内部div对齐固定

htrmnn0y 于 2023-01-04 发布在 jQuery

关注(0)|答案(2)|浏览(134)

我尝试将div与内容向右对齐，而不考虑分辨率，现在可以观察到，当内部文本内容增加时，整个div的位置是动态的，而不是固定的。
预期内容应固定，任何附加文本应在同一div中换行，div位置向左不变

- 网址：**

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%;'>
    <h1>text1</h1>
    <div>text2</div>
    <a>link text</a>
  </div>
</div>

 <div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%;'>
    <h1>text1 2 3 4 5 6 </h1>
    <div>text2 3 4 5 6</div>
    <a>link text</a>
  </div>
</div>

jquery

来源：https://stackoverflow.com/questions/74992924/how-to-make-inner-div-alignment-fixed

2条答案

按热度按时间

1mrurvl11#

<!-- Wrapper -->
<div style="position: relative;">

  <div style="position: absolute; width: 100px; top: 10%; right: 10%;">
    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1</h1>
        <div>text2</div>
        <a>link text</a>
      </div>
    </div>

    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1 2 3 4 5 6 </h1>
        <div>text2 3 4 5 6</div>
        <a>link text</a>
      </div>
    </div>

    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1 2 3 4 5 6 </h1>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <a>link text</a>
      </div>
    </div>
  </div>

</div>

赞(0）回复(0）举报 2023-01-04

5fjcxozz2#

您可以将text-align属性设置为end，这将使div的内容与其结尾对齐（在本例中为右边缘），而不管其中3个文本元素中任何一个的长度。

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%; text-align:end'>
    <h1>text1</h1>
    <div>this is demo text to show alignment towards the end</div>
    <a>link text</a>
  </div>
</div>

赞(0）回复(0）举报 2023-01-04

我来回答

jquery 如何使内部div对齐固定

2条答案

相关问题

热门标签

最新问答