问题具有溢出或使用CSS

在DIV文本我有一个代码块，其如下所示：问题具有溢出或使用CSS

<?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加入到来。

现在让我告诉你一个形象：

enter image description here

看到的文字是失控的div。现在，如果我设置div的overflow: hidden，则contact us.旁边的文本将隐藏起来。

enter image description here

我只是不想说，我要线条后contact us.

得到打破，下一行会从"We are just a phone call away."

显示我知道这可以通过一个固定简单的属性，但我只是不知道。

来源

2013-06-02 Saswat

提供问题的代码的的jsfiddle。 – Nitesh

我不知道该怎么做 – Saswat

转到jsfiddle.net并添加有此问题的代码。或者提供存在此问题的链接。 – Nitesh

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

你有style.css文件中的风格，在.column1设置宽度为所有p（文件http://ghureasi.com/assets/front_assets/css/style.css）：

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

因为width:460%你允许该内容增长（和使用，然后更多的空间父元素）。

将其更改为

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

来源

2013-06-02 15:32:09 outcoldman

没有得到你，请详细写下 – Saswat

我更新了我的回答 – outcoldman

谢谢先生，它帮了我很多 – Saswat

添加到您的CSS和您的问题将得到解决。

.column1 span { 
    display: inline-block; 
    width: 94%; 
}

添加宽度auto到.column1 p类。

例如，

.column1 p{width:auto;}

希望这有助于。

来源

2013-06-02 15:34:49 Nitesh

尝试改变这一行

<strong><?php echo $srv['service_content'];?></strong>

到

<span style="width:250px;"> 
    <strong><?php echo $srv['service_content'];?></strong> 
</span>

来源

2013-06-02 16:01:46 TNK

问题具有溢出或使用CSS

回答

相关问题