css - 使用 css 在 div 中出现溢出或文本问题

Question

我有一段代码如下:

<?php
if(strpos($page_info[0]['page_title'], 'Service')!==false)
{?>
        <img src="<?php echo base_url();?>assets/front_assets/images/service.png" width="450px" height="400px"/>
        <br/>
        <div style="width:480px; height: auto; border: 1px solid #000; border-radius: 5px; overflow: visible; display: inline-block;">
        <?php
        foreach($service as $srv)
        {?>
        <div style="float:left;width:100px;">
        <img src="<?php echo base_url().$srv['service_image'];?>" width="100px"/>
        </div>
        <div style="float:left;width:300px">
            <strong><?php echo $srv['service_title'];?></strong>
            <br/>
            <strong><?php echo $srv['service_content'];?></strong>
        </div>
            <div style="clear:both;"></div>
        <?php
        }?>
        </div>

        <?php
}

行<strong><?php echo $srv['service_content'];?></strong>显示来自数据库的文本，该文本是使用 ckeditor 添加的。

现在让我给你看一张图片:

看到文本正在脱离 div。现在，如果我设置 div 的 overflow: hidden然后是 contact us. 旁边的文字被隐藏起来。

我只是不想那样，我希望线路在 contact us. 之后断开

下一行显示自 "We are just a phone call away."

我知道这可以通过一个简单的属性来解决，但我就是不知道。

Answer 1

只需修复 .column p 样式，该样式将父级 p 的宽度设置为 460px。将其更改为 100%。

style.css 文件中有一个样式，它为 .column1(文件 http://ghureasi.com/assets/front_assets/css/style.css)中的所有 p 设置宽度:

.column1 p{
display:block;
width:460px;
padding:20px 0 25px 3px
}

因为 width:460% 你允许这个内容增长(并且使用比父元素更多的空间)。

改成

.column1 p{
display:block;
width:100%;
padding:20px 0 25px 3px
}