我想弄清楚overflow-y:scroll;如果不需要我怎么能隐藏.我的意思是我正在建立一个网站,我有一个主要区域,将显示帖子,如果内容不超过当前宽度,我想隐藏滚动条.
另外,我的第二个问题.我想这样做当帖子超过当前宽度时,宽度会自动增加,内容不会开箱即用.
有没有人知道如何做到这一点?
邮政区域:
.content {
height: 600px;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
font-size: 15px;
text-align: justify;
line-height: 19px;
overflow-y:scroll;
}
Run Code Online (Sandbox Code Playgroud)
主网站容器:
.container {
margin: 0 auto;
width: 757px;
margin-top: 30px;
text-align: center;
}
Run Code Online (Sandbox Code Playgroud) 我有一个与此类似的页面结构:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
当内心的增加时,我希望父母div能够扩大.heightdivheight
编辑:
一个问题是,如果width子内容的内容扩展width到浏览器窗口之外,我当前的CSS会在父项上放置一个水平滚动条div.我希望滚动条位于页面级别.目前我的父div设置为overflow: auto;
你能帮我解决这个问题吗?
假设我有几列,其中一些我想旋转以下值:
<div class="container">
<div class="statusColumn"><span>Normal</span></div>
<div class="statusColumn"><a>Normal</a></div>
<div class="statusColumn"><b>Rotated</b></div>
<div class="statusColumn"><abbr>Normal</abbr></div>
</div>
Run Code Online (Sandbox Code Playgroud)
有了这个CSS:
.statusColumn b {
writing-mode: tb-rl;
white-space: nowrap;
display: inline-block;
overflow: visible;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
Run Code Online (Sandbox Code Playgroud)
最终看起来像这样:

是否可以编写任何会导致旋转元素影响其父级高度的CSS,这样文本就不会与其他元素重叠?像这样的东西:

当我以纵向模式启动我的应用程序时,它工作正常.然后我旋转到风景,它扩大了规模.为了使其能够在横向模式下正确缩放,我必须双击两次,首先进行缩放(正常的双击行为),然后再一次缩放(再次,正常的双击行为) .当它缩小时,它会缩小到横向模式的正确新比例.
切换回肖像似乎更加一致; 也就是说,它处理缩放,以便在方向变回肖像时缩放比例正确.
我想弄清楚这是不是一个错误?或者如果这是可以用JavaScript修复的东西?
使用视口元内容,我将初始比例设置为1.0,我没有设置最小或最大比例(我也不想).我将宽度设置为设备宽度.
有任何想法吗?我知道很多人会很感激有一个解决方案,因为它似乎是一个持久的问题.
我试图用自己的百分比来调整img的大小.例如,我只想将图像缩小到50%,将图像缩小一半.但是应用width: 50%;会将图像的大小调整为容器元素的50%(<body>例如,可能是父元素).
问题是,我可以在不使用javascript或服务器端的情况下用一定比例调整图像大小吗?(我没有图像大小的直接信息)
我很确定你不能这样做,但我只想看看是否有智能的CSS解决方案.谢谢!
我在使用CSS的width属性时遇到了一些麻烦.我在div中有一些段落.我想让段落的宽度等于它们的内容,以便它们的绿色背景看起来像文本的标签.我得到的是段落继承了更宽的div父节点的宽度.
#container {
width: 30%;
background-color: grey;
}
#container p {
background-color: green;
}Run Code Online (Sandbox Code Playgroud)
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>Sample Text 3</p>
</div>Run Code Online (Sandbox Code Playgroud)
这就是我想要的:
text text text text text text text text text text text
text text text text text text text text text text text
+-----------+
| some text |
+-----------+
text text text text text text text text text text text
text text text text text text text text text text text
Run Code Online (Sandbox Code Playgroud)
..."some text"块是div.我希望div是包含其文本而不包装所需的最小宽度.如果文字太长而不适合没有包装,那么它可以包装.
我不想为div设置明确的宽度.我也不想设置min-width或max-width; 就像我说的,如果有太多的文字要包含在一行而没有包装,那么如果它包装就没关系.
我有一个附加样式的div元素:
.mypost {
border: 1px solid Peru;
font-family: arial;
margin: auto;
min-width: 700px;
width: 700px;
}
Run Code Online (Sandbox Code Playgroud)
我在DIV块内部放置WordPress的帖子内容,但为了简单起见,假设<img>DIV中只有一个.我希望我的div最小宽度为700像素,如果图像宽度超过700像素,则调整宽度.
我有什么选择来实现这一目标?请指教.
UPDATE
我正在接替构建我们的HTML电子邮件的人,模板中充满了字体标记.这真的有必要吗?我知道CSS支持在电子邮件中不是很好,但是如果我在容器上设置内联样式<td>就像这样...
<td style="font-family:Arial, Helvetica;color:#555555;font-size:12px">
Run Code Online (Sandbox Code Playgroud)
...当然,这将适用于大多数电子邮件客户端.从我执行的测试看来似乎就是这种情况,本文似乎证实了这一点.
任何人都有关于<font>HTML电子邮件中是否真的需要标签的任何输入?
我正在关注这篇文章https://css-tricks.com/almanac/properties/w/width/,试图了解这个规则的工作原理.
我有这个例子:
*{margin:0; padding:0}
.box{
background: lightgreen;
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}Run Code Online (Sandbox Code Playgroud)
<div class="box">
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
<figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>Run Code Online (Sandbox Code Playgroud)
文章说,fit-content可以用来将未知宽度的div居中 margin: x auto;
但是如果你在这个例子中更改了max-content的fit-content,那么无论如何它都会起作用,并且它们似乎总是以相同的方式运行.
有谁知道这两条规则之间有什么区别,我应该在哪些情况下使用其中一条规则?
css ×8
html ×5
css3 ×2
width ×2
email ×1
html-email ×1
image ×1
ipad ×1
iphone ×1
javascript ×1
layout ×1
orientation ×1