Question

这是我正在尝试制作的div的照片，文字左对齐，图像向右浮动。图像必须从上到下（即绿色容器的高度的100％）。我想使div的高度可调整到内容。（更多内容，更多高度）。但是，图像应始终位于合适高度的右上角。问题是，我的文本是在图像下面而不是在对齐之后它应该保持在左边直到图像在那里然后应该在图像下面（跨越整个屏幕/绿色div或文本包装，因为我们称之为）并在图像结束后进行正常对齐。

请帮助。

    <div class="gtco-container-fluid" style="background- color:#00a652; height: auto;">

        <div class="row animate-box">

        <div class="gtco-container">

            <div class="col-md-7">
                <h2 style="color:white;font-weight: bold;padding-top:20px;">The heading</h2>
                <p style="color:white;font-weight:bold;font-size:20px;">hhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                </p>
                <p style="color:white;font-weight:bold;font-size:20px;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                   </p>


            </div>
        </div>
               <img src="images/default.jpg"; width="600px"maxheight="600px;" style="position:absolute;right:0px;padding-left: 25px;">

        </div>

    </div>

CSS：

   .gtco-container {
   max-width: 1140px;
   position: relative;
   margin: 0 auto;
   padding-left: 15px;
   padding-right: 15px;
   }

Answer 1

图片位于您的文字下方，因为浏览器会将＆＃34; hhhhhh ...＆＃34;解释为一个单词，但它并不知道如何打破它，因此它不会＃39 ;吨。

@Lalit Sachdeva的答案还可以，但它在firefox中不起作用（至少codepen示例不在我最新的firefox上）并且在ie11 {{3}中的工作方式不同}

在测试布局时，你应该尝试使用lorem ipsum，或者更好的是真正的文本，其中包含长短单词...你可以去你最喜欢的新闻网站并随机复制一些文字制品

Answer 2

请使用

p {
  word-break: break-all;
}

或

<p style="color:white;font-weight:bold;font-size:20px;word-break: break-all;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                   </p>

这是展示相同https://codepen.io/team/css-tricks/pen/avavBY

的codepen链接

Answer 3

所有内联样式都让我失明。这应该有效：

<style>
    * { word-break: break-all; }
</style>

<div class="gtco-container-fluid">
    <div class="row animate-box">
        <div class="gtco-container">
            <div class="col-md-7">
                <h2>The heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                   Nullam commodo pharetra urna sit amet interdum. Donec 
                   efficitur urna quis arcu tincidunt, ut vehicula augue 
                   rhoncus. Proin metus velit, dictum vitae libero sed, 
                   condimentum faucibus mi. Fusce rutrum lorem id metus 
                   varius congue. Nunc sagittis lacus nec blandit ultricies. 
                   Duis mattis justo ac dictum bibendum. Nulla molestie 
                   tellus vitae lectus bibendum, cursus varius lectus 
                   consequat. Etiam placerat dignissim arcu, quis lacinia 
                   quam tincidunt in. In quis tellus eu turpis varius 
                   imperdiet ut in turpis. Vestibulum id lobortis turpis. 
                   Quisque leo nisl, vulputate eu mi ut, luctus scelerisque 
                   massa. Suspendisse potenti. Nulla id sodales ligula. 
                   Vestibulum ante ipsum primis in faucibus orci luctus et 
                   ultrices posuere cubilia Curae.</p>
            </div>
            <div class="col-md-5">
                <img src="images/default.jpg" width='100%'height='100%' />
            </div>
        </div>
    </div>
</div>

使用Bootstrap网格系统进行文本和图像对齐

3 个答案: