相关疑难解决方法(0)

我有2个div:一个在左侧,一个在我的页面右侧.左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

<div id="search">Text</div>
<div id="navigation">Navigation</div>

我有类似的东西:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

两个花车都是必需的.我希望内容div填充整个屏幕减去菜单的100px.如果我不使用浮动,div就会完全扩展.但是如何在设置浮点数时设置它？如果我使用......

style=width:100%

然后内容div获取父级的大小,它是我也尝试过的主体或另一个div,因此它当然不适合菜单,然后显示如下.

如何让div填满剩余的宽度？

例如

<div id="Main" style="width: 500px;">
  <div id="div1" style="width: 100px;"></div>
  <div id="div2"></div>
  <div id="div3" style="width: 100px; float: right;"></div>
</div>

如何让div2填补其余部分？

我试图使用CSS动态更改div的宽度,而不是jquery.以下代码适用于以下浏览器:http://caniuse.com/calc

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

我也想支持IE 5.5及更高版本,我发现以下内容:表达式.这是正确的用法:

/* IE-OLD */
width: expression(100% - 500px);

我还可以支持Opera和Android浏览器吗？

CSS2.1规范要求overflow除了visible建立新的"块格式化上下文"之外.这让我觉得很奇怪,一个明显的目的是隐藏溢出而不影响布局的属性实际上确实会以一种主要方式影响布局.

看起来像溢出值除了visible组合两个完全不相关的特征之外:是否创建了BFC以及是否隐藏了溢出.它不像"溢出:隐藏"在没有BFC的情况下完全没有意义,因为浮动历史上可以溢出它们的父元素,隐藏溢出而不改变布局似乎是明智的.

这个决定背后的原因是什么,假设它们已知？那些参与规范工作的人是否描述了为什么决定这种情况？

说,我有以下无序列表.按钮有width: auto.如何设置元素的样式,以便#textField尽可能地拉伸,因此#textField按钮的宽度加起来会达到100%？即#textField宽度==(宽度的100%) - (按钮的计算宽度).

<ul>
  <li>
    <input id="textField" type="text" /><input type="button" />
  </li>
</ul>

因此,例如,假设100%宽度li为100像素:如果按钮的计算宽度为30px,则#textField宽度为70px; 如果按钮的计算宽度为25px,则#textField宽度将变为75px.

我想要完成的是有一个固定宽度的第一个div和一个流动的第二个div,它将填充父div宽度的剩余宽度.

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

在这一点上,一切似乎都很好,流畅.

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

我想继续第二个,但我觉得第二个例子将来会给我带来麻烦.

你能提供一些建议或见解吗？

我还是一个CSS新手.多年来我一直使用嵌套表管理我的布局,我知道所有CSS人都会告诉我它是邪恶的.我已经习惯了很多年的CSS,但从一开始我一直无法按照我想要的方式控制我的布局.

简而言之,我想要的是一个只有内容宽的<div>.我不想设置它的大小.我希望它只是与其动态创建的内容一样宽.

一张桌子做得很完美.使用<div>它似乎总是做我想要的事情.没有"溢出"选项做我想要的.

典型的例子是当我想创建一个整页的柱状布局时,左栏包含导航链接,右栏包含内容.我希望左列与导航链接一样宽.不多也不少.(导航链接不是静态的;它们是动态创建的,并且可以随时改变大小/长度).右边("内容")列应该是剩下的东西.最重要的是,当我使浏览器屏幕更宽或更窄时,我希望左列仍然与导航链接一样宽:不多也不少.如果浏览器的宽度太窄,我希望内容根据需要自动换行.在任何情况下,我都不希望文本被遮挡或超出定义的列.

简而言之,我想要一个无需使用表的<div>和表一样工作.当然,CSS专家.这可以做到....对吗？我在其他论坛上问了这个问题,但从未收到过可接受的答案.

或者采取一个与此相关的简单示例(也许这很容易):

<ul style="background: orange;">
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>

整个过程与浏览器屏幕一样宽.但我希望它只与最长的元素一样宽.我如何用CSS做到这一点？我可以把整个东西放在像这样的表中

<table border=0 cellpadding=0 cellspacing=0><tr><td>
<ul style="background: orange;">
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>
</td></tr></table>

......它做我想做的事.我如何使用CSS而不是使用那些"邪恶"表？

我试过miku的例子.
它不起作用(我想要它做什么).

如果我把超长的导航线做成长串的话

 an&nbps;extra&nbps;long&nbps;navigation&nbps;link&nbps;goes&nbps;here&nbps;-&nbps;this&nbps;could&nbps;even&nbps;be&nbps;an&nbps;image!

我希望左侧导航侧根据需要进行扩展.我不想要最大宽度.使用上面的示例,超长行将被"main"div遮挡.

此外,"main"div应该是浏览器宽度的其余部分,在这种情况下,它只与文本内部一样宽.

我正在尝试使用HTML5和CSS实现以下HTML结构.所述section元件必须是彼此相邻.右边section元素必须具有margin-left30像素和width220像素的固定值.

我到目前为止的内容如下:

HTML

<section id="section-left">My left section</section>
<section id="section-right">My right section</section>

CSS

#section-left {
   float: left;
}

#section-right {
   float: right;
   width: 220px;
   margin-left: 30px
}

我的问题是左边section没有填充剩余的空间直到正确的section元素.我的结果如下:

这里有什么问题？

我使用的主题的内容设置为 1200px。问题是我想创建一个与屏幕边缘全宽的 DIV，然后偏移左边距以抵消差异。（我猜这是最简单的方法）

如何计算屏幕一侧到 1200px 网格左侧之间的列宽度？然后计算我尝试创建的 DIV 宽度的差异，以便 DIV 为全宽，无论在什么屏幕尺寸上查看？

我知道我可以使用 Visual Composer 等精美的编辑器来完成此操作，但它们太笨重并且会使网站变慢。

以下似乎适用于文本，但我无法让图像在屏幕上全宽延伸，除非我将其放大并与屏幕尺寸重叠。我需要它从屏幕一侧触摸到屏幕一侧

.blue_section {
  width: 200% !important;
  margin: 0px -50% 0px -50% !important;
  padding: 0px 0px 0px 0px !important;
  background-color: #0088CC;
}
.blue_content {
  width: 1200px !important;
  height: 100% !important;
 margin: 0px auto 0px auto !important;
 padding: 10px !important;
}

我有以下HTML代码:

<div class="a">
    <div class="b">
        <a href="#">text</a>
    </div>
    <div class="c">
        text
    </div>
</div>


div.a
{
    margin-top: 10px;
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
}

div.b
{
    padding: 27px 10px 7px 10px;
    background-color: #fff;
    overflow: hidden;
    float: left;
}

div.c
{
    float: left;
}

我应该为div.c设置哪些样式,使其在div.b旁边并适合剩余的宽度？

这是一个适合100%屏幕的tempalte.

谢谢!

我喜欢在整个屏幕上使标题全宽，包装器是1052px并希望在徽标和菜单保持原位时扩展它。

有没有办法div在响应式布局中将内部扩展到全屏宽度？

如何使用 css 解决这个问题，记住“菜单”固定在顶部，“全宽”div必须正常滚动？我想我不能使用绝对定位。我希望它很清楚，否则我会尝试改进问题。

这是 header.php 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>

</head>

<body <?php body_class() ?>>

<div id="wrapper">
    <div id="inner-wrap">
        <div id="header" class="fullwidth">
            <div id="logo">
                <?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>

                <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
                    <?php if (!option::get('misc_logo_path')) …