标签: width

当浏览器窗口小到足以强制水平滚动条并向右滚动时,标题的背景颜色在浏览器边缘之前结束.我正在使用CSS课程.

.s_header {
    margin: 0;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000;
    background-color:#b8dbec;
    height:133px;
}

内容<div class="s_header">不如下面的4列表那样宽,其中内容总计为840px,图像宽度为+ padding,140px为固定宽度列.因此,当浏览器窗口小于840px时,会有一个水平滚动条,除了滚动时标题的背景被切断之外.

<div class="s_header">body和html 的父元素,100%宽度表示窗口宽度.我试过包括溢出:在.s_header课堂上看得见但没有成功.

体宽也设置为100%边距0

当滚动条出现时,是否有一种简单的方法可以让背景在右侧延伸？

问题页面就在这里

任何建议将不胜感激.

我有我认为是一个奇怪的问题.我有一个div,在父div中,我给了孩子div宽度为100%,但它没有增长到父div的大小.

父DIV并没有任何类型的集合宽度.所以我的问题是:宽度百分比仅在父元素具有设置宽度时才起作用,或者它是否应该增长？

澄清:

如果父div没有设置宽度,有些人可能想知道父div的宽度是如何增长的.原因是我在父div中有其他兄弟元素,并且设置了它们的宽度,所以父div已经增长到满足那些兄弟宽度.

代码示例:

<div id="parent-div">
    <div id="child-element" style="width: 100%">Content</div>
    <div id="sibling" style="width: 250px"></div>
</div>

子元素不会增长以满足父div.宽度100%基本上没有做任何我能说的事情.这是在IE7中.

谢谢.

后续行动:感谢大家的回答.我正忙着测试我的结局.我原本认为父母div只会像他们的孩子一样宽大,但事实证明我错了,因为我上面的例子,我编码只是为了证明我的问题.就我而言,我的父母div有一个position: fixed和bottom: 1px和right: 1px适用于它.从我的测试来看,这似乎改变了父div的行为.它不再自动延伸到页面的整个宽度,而是假设我认为的行为无论如何,这是父div扩展到足以容纳其最宽的孩子.这就是我现在看到的行为,但这只是因为我的父div有一个固定的位置.

在iPAD上创建新的UITableViewCell时,contentView宽度设置为320.有没有办法获得正确的宽度？我无法使用当前视图的宽度,因为表格单元格不会跨越视图的整个宽度.任何帮助将不胜感激.

我有一个像素大小的表格,单元格的宽度取决于内容.表的第一行中有输入元素,我需要它们与parent()具有相同的宽度.我们的想法是应该自动计算这些输入的宽度,并使用jQuery以像素为单位进行设置.这些单元格和输入没有类或id.我只能使用具有以下代码的选择器设置一个单元格的宽度:

var parentWidth = $(".foo").width();
$('td.foo input').width(parentWidth);

但正如我所说,我需要它更普遍而不使用任何类等.任何人都可以帮助我吗？谢谢!

我有一个使用flexslider的奇怪问题.幻灯片LI没有获得正确的宽度,因此显示了所有幻灯片.这仅在首页加载时发生.一旦我切换到另一个标签并切换回一切看起来很好.也许JS加载问题？!

截图:这里

flexslider.css

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); }

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true
    }); 
});

我用$(document).ready(function()也尝试了它,但仍然是同样的问题.

有任何想法吗？

我有一个问题是自动修复UL的宽度,LI可以直接漂浮.

如果我改变css,设置UL的宽度'1000px'不是'auto'; 我想要的就是可以做到的.

但是,是否还有其他任何设置只能通过CSS也可以达到相同的效果？因为我想自动更改UL的宽度作为增加LI的数量.

    Now is like
    div ul-------------------------------div ul
            |   ///////      ////////       |
            |   /////// li   ///////  li    | 
            ---------------------------------
               ///////     ////////
               ////// li   ///////  li

   I want to be like this  
        div                                 div
          ul-------------------------------------------------------------ul
            |   ///////      ////////       |  ///////      ////////    |
            |   /////// li   ///////  li    | /////// li   ///////  li  |
            -------------------------------------------------------------

http://jsfiddle.net/KgyHZ/21/

HTML

<div class='test'>
    <ul>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
</div>

CSS

.test{
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.test …

当我将窗口滚动到水平然后页脚和标题中断时,我正面临这个问题.

请帮助CSS

你可以在这里查看现场演示http://yeszindagi.com/

    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:1.3em;
        min-height:100%;
    }


    .containerMain {
        min-height:100%;    
        width: 100%;
    }


    .full {
    width:100%;
    }

    .fixed {
    width:900px;    
    }


    .footer {
        border-top:1px dashed #000;
        margin-top:5px;
        height:50px;
        background-color:#F7B200;
        bottom:0px;
        position:relative;
    }

---------------------------- HTML CODE -------------------- --------------------

    <div class="containerMain">
    ....
    .....
    .........
    <div class="full footer clear ">
        <div class="fixed center">
            <div class="left">
                <ul class="links">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>    
            <div class="social right">
                <a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a> …

我需要计算svg文本元素的高度和宽度.有没有办法在没有实际添加到我的页面的DOM的情况下这样做？我只需要措施而不是实际要素.

我既不使用d3也不使用Raphael,而只使用简单的JavaScript.(也许我应该使用前者之一进行计算？)

我所追求的只是一个像imagettfbboxPHP 一样的函数,但在纯JavaScript中.有这样的事吗？还是写起来容易？

因为我实际上并没有使用文本元素,所以添加它们并隐藏它们似乎很奇怪(我也读过Firefox在计算隐藏元素的bbox时遇到问题,计算SVG文本的垂直高度).但也许这是唯一的出路？在这种情况下,我是否必须使用不透明度？之后我会以某种方式破坏元素吗？

我正在使用JQuery 1.12.4.我有以下DIV,我打算将其作为对话框打开.

<div id="loginBox" style="display:none">
    <div>Login/Sign Up</div>
    <div id="loginLogos">
            <a href="/auth/google"><img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
            <a href="/auth/facebook"><img border="0" alt="Facebook" src="http://runtrax.devbox.com:3000/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
            <a href="/auth/twitter"><img border="0" alt="Twitter" src="http://runtrax.devbox.com:3000/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"> </a>
 </div></div>

我注意到的是,当我将屏幕宽度减小到大约320像素(模拟移动浏览器宽度)时,对话框的开口宽度超过了元素的总宽度 - 这里有很多空白区域.右边的图像.请参阅此处的小提琴 - https://jsfiddle.net/g4a60Lq7/3/.如何使对话框像元素一样宽,而不是更宽？以下是我打开对话框的方式......

  var opt;
opt = {
  autoOpen: false,
  modal: true,
  width: 'auto',
  dialogClass: 'noTitle',
  focus: function() {
    return $(this).dialog('option', 'width', $('#loginBox').width() + 50);
  }
};
$("#loginBox").dialog(opt);
return $("#loginBox").dialog("open");

编辑:想发布图片以回应pritishvaidya的第二个plunker ...

我正在尝试使用相对于祖父元素宽度的百分比设置一些元素的宽度。像这样。

<style>
.grand{width:1000px; overflow:hidden;}
.parent{width:2000px; position:relative}
.child1{float:left; width:50%; height:200px; background-color:blue;}
.child2{float:left; width:50%; height:200px; background-color:green;}
</style>


<div class="grand">
 <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
 </div>
</div>

但我不知道如何做到这一点，我怎样才能让子元素直接引用它的祖父元素而不是直接的父元素？（在这种情况下，如果我将子元素宽度设置为 50%，它必须是 500px，而不是 1000px。）

有没有可能的方法来做到这一点？