我遇到的问题是内容超出容器.它发生在我的代码的service_description区域.我有垂直和水平填充设置描述.垂直填充不是水平的.
要使描述出来只需单击其中一个框,然后您将看到我所指的内容.我希望所有内容都保留在该框中.
当我有填充集时,为什么这样做呢?
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.page_wrap {
margin: 15px 10%
}
.left_service_wrap {
float: left;
width: 40%;
margin-left: 5%;
}
.service_wrapper {
margin-left: 25%;
border: 1px solid black;
margin: 15px 0;
width: 80%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
padding-right: 6px;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
Flooring
The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
Roofing
Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
1> sbeliv01..:
您可以添加word-wrap
到您的.service_description
类中,当它到达容器的末尾时,应该将单词分成新行.
.service_description {
display: none;
padding: 8px 14px;
width: 100%; /* Probably should remove this as well */
margin-top: 10px;
font-size: .9em;
word-wrap: break-word;
}
推荐阅读
-
如何解决《如何将参数传递给构造函数反序列化json》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《intellij中的复合配置》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何制作ParseUser的子类并使用它(Android)》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《Ajax不会让css当前链接样式正常工作》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《Android中具有动态ActionBar颜色的半透明StatusBar》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《使用ShinyRmarkdown中的操作按钮进行绘图》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《地图的棉花糖碎片活动中的崩溃》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《编译器是否避免中间整体推广或转换?》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《同时使用display:none和display:flex;》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《在单个URL中组合多个自定义用户分类》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《Anko0.8-未解决的lparams参考》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《RxSwift:返回一个带有错误的新observable》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《禁用日历中的所有日期》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《逻辑上选择类别和子类别(php,joomla,javascript,ajax)》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《"dotnetrestore"失败并显示"无法找到依赖关系NETStandard.Library"消息》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何以及在简单XAML窗口中为转换器创建StaticResource密钥的位置?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《Json使用c#从文本文件序列化》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《正则表达式以相反的顺序提取文本,直到字符的第3个实例》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《使用外部python插件运行asyncio循环引擎》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《@OneToMany@JoinTable错误》经验,为你挑选了0个好方法。 ...
[详细]
吐了个 "CAO" !
Tags | 热门标签
RankList | 热门文章
-
1在Asp.NET中为选项预检请求添加'access-control-allow-origin'响应
-
2日历 - 获取上个月的最后一天
-
3确定ActiveCell是否在特定表中
-
4将一组字符串转换为简单的字符串c ++
-
5Rails数据库唯一性验证不起作用
-
6为什么匿名函数会丢失对象范围?
-
7什么时候在Prolog中使用短语?
-
8仅选择特定的CSV列
-
9Elixir:使用整数键将列表转换为地图
-
10我收到错误 - 错误:安装Cordova时无法找到模块'cordova-common'
-
11组合两个数组的相同索引对象
-
12无法在Eclipse网络连接中清除"SOCKS"
-
13Azure webjob; 计划执行也按队列触发
-
14Java内存不足自动堆转储文件名
-
15由双指针创建的C++ 2d数组
-
16与Unity使用Facebook插件时的ActivityNotFoundException
-
17使用C#在Mac上开始使用Sitecore CMS进行开发
-
18Sails不会创建mysql表
-
19如何修复travis.yml中拒绝的gradlew权限?
-
20-e和-ne在bash脚本中的含义是什么?
DevBox开发工具箱 | 专业的在线开发工具网站 京公网安备 11010802040832号 | 京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有