我需要创建一个包含多个其他DIV的容器DIV样式.如果浏览器窗口调整为狭窄,则会询问这些DIV不会换行.
我试着让它像下面这样工作.
<style>
.container
{
min-width: 3000px;
overflow: hidden;
}
.slide
{
float: left;
}
</style>
<div class="container">
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这适用于大多数情况.但是,在某些特殊情况下,渲染不正确.我发现容器DIV在IE7的RTL中变为3000px宽度; 它变得凌乱.
有没有其他方法可以让容器DIV不包装?
我在使用Visual Studio 2010在ASPX页面中编译时遇到错误:
<td valign="top" nowrap width="237">
Run Code Online (Sandbox Code Playgroud)
错误消息是
"Attribute 'nowrap' is considered outdated. A newer construct is recommended."
Run Code Online (Sandbox Code Playgroud)
什么构造是错误消息引用?它的行为与'nowrap'完全相同吗?
说我有一段这样的文字
你好我是一些文本你好我是一些文本你好我是一些文本你好我是一些文本我不希望被打破新行
考虑上面的段落.如果可能的话,我希望粗体部分不会被打破.如果它需要一个滚动条或其他东西,我希望它打破,但如果可以在该文本之前或之后插入分页符,以便它可以适合一行,则不要中断.
这怎么可能?我已经尝试了类似的东西page-break-inside
,但它似乎没有在firefox中做任何事情.
我正在使用高级滑动工作月视图(需要加载当前,下一个和上一个以允许每个视图粘在你的手指上)这意味着我有许多视图会导致事情变得有点慢.
| | #<-- screen bounderies
' previous ' current ' next ' #<-- three months loaded
' previous ' current ' next ' #<-- three months when the user drags their finger
Run Code Online (Sandbox Code Playgroud)
因此,我想在单个TextView中表示多个事件.当用户点击月视图(小屏幕)上的其中一天时,它将打开当天的日视图.
在月视图中的每一天(通常一天获得屏幕宽度的七分之一,垂直略小于七分之一)我想避免这种情况
| 31|
|10a: |
| Testi|
|ng |
|11a: |
Run Code Online (Sandbox Code Playgroud)
相反,我想要
| 31|
|10a: |
| Testi|
|11a: |
| Anoth|
Run Code Online (Sandbox Code Playgroud)
请注意,它ng
被切断而不是换行到下一行.这就是我要找的.
我正在尝试使用overflow-x:scroll&white-space:nowrap创建一个带有(平铺)背景图像的水平滚动窗格.该窗格跨越任意数量的元素.
CSS:
.frame {
overflow-x: scroll;
}
.pane {
background-image: url(free-tile-floor-texture.jpg);
background-repeat: repeat;
white-space: nowrap;
}
.item {
display: inline-block;
width: 150px;
height: 50px;
background-color: grey;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我希望背景图块自动跨越窗格的整个宽度,包括其所有项目元素.目前它只填充框架宽度.罪魁祸首似乎是窗格宽度属性 - 它不会调整窗格内容的总宽度.
Ofc,它通过手动调整width属性来工作,但我需要它动态调整.
如何获取窗格的背景图像以填充窗格的全宽?还有另一种方法可以达到同样的效果吗?
Chrome浏览器的最新更新打破white-space: nowrap
使用text-overflow: ellipsis;
上一个overflow: hidden
元素.如何解决这个问题而不在name
课堂上添加硬编码宽度
<h1>problem</h1>
<div class="container">
<div class="name">
<div class="firstname">
test
</div>
<div class="lastname">
as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
</div>
</div>
<div class="side">
options
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
结构不应该改变,因为我.name
在我的应用程序中的其他地方重用该部分.
.container {
width: 800px;
height: 80px;
display: flex;
border: solid 1px black;
margin: 10px;
}
.name {
display: flex; …
Run Code Online (Sandbox Code Playgroud) 我正在<select>
使用div和jquery 重建类似于框的下拉菜单.包含下拉项目的div应该具有最小宽度,但没有最大宽度,因为它应该与列表中最宽的项目一起增长(所以如果我有非常长的项目,如'[这是容器中最长的项目]',整个容器应该与此条目一样宽.
现在我几乎得到了我想要的东西,white-space:nowrap
用于容器中的每个项目,以便项目的文本不会在新行上继续.使用的问题是文本流动开箱即用,而不是让框沿文本增长.我无法弄清楚如何解决这个问题.我已经尝试了,text-overflow:ellipsis
但似乎只是隐藏溢出的文本并在末尾添加三个点(...).
简而言之,这就是我的问题:如何将div与其中的文本一起生长,何时white-space:nowrap
应用于它,而不是让文本流出它?我不想隐藏文本使用overflow:hidden
,我想显示整个字符串..
提前致谢!
以下代码导致#headline溢出#wrapper,我不明白为什么会发生这种情况.
HTML:
<div id="wrapper">
<div id="logo">
<img src="/test.png">
</div>
<div id="headline">
<h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # …
Run Code Online (Sandbox Code Playgroud) 这是我的小问题(这里的值只是示例):
可以说我有一个宽度约为500px的窗口.在我的文档中,我有一个没有指定宽度的外部div,但是下面的css:
.outer{
white-space:nowrap;
background:blue;
}
Run Code Online (Sandbox Code Playgroud)
在这个div里面是另外3个具有以下属性的div:
.t1{
display:inline-block;
width:400px;
}
Run Code Online (Sandbox Code Playgroud)
(注意问题的宽度400px
.这就是问题所在,线条宽于窗口,外部div不会延伸.HTML看起来像这样:
<div class="outer">
<div class="t1">1</div>
<div class="t1">2</div>
<div class="t1">3</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我想要实现的是让3个内部div具有蓝色背景,而不是为t1
类设置它.这个例子将产生的是蓝色背景,仅限于窗口的宽度.
请参阅此处的完整示例:http://jsfiddle.net/sjCTR/(如果您的屏幕很大,则必须调整左下角)
我想知道是否可以通过css/html实现,不设置外部div宽度/内部div背景?