Html 如何在其他流体设计中使DIV粘贴到固定宽度元素的侧面_Html_Css_Responsive Design

Html 如何在其他流体设计中使DIV粘贴到固定宽度元素的侧面

html css responsive-design

Html 如何在其他流体设计中使DIV粘贴到固定宽度元素的侧面,html,css,responsive-design,Html,Css,Responsive Design,我有一个带有填充和固定宽度边栏的流体内容区域。我想要float:right一个图像，并给它一个负的右边距等于容器的填充，以使浮动图像紧靠边栏代码胜过千言万语下面是一个简化的测试用例，它显示了问题：--收缩或展开预览窗格以查看看来我的负利润率计算一定在什么地方出错了。非常感谢您的帮助。将8.xxx%的侧边距设置在图像的同级而不是父级#内部，这样您就不需要负边距 #内部>p{ 填充：0.8.571428571429%； } ... .对{ 浮动：对；宽度：53.75%；左缘：5%；右边

我有一个带有填充和固定宽度边栏的流体内容区域。我想要

float:right

一个图像，并给它一个负的

右边距

等于容器的

填充

，以使浮动图像紧靠边栏

代码胜过千言万语

下面是一个简化的测试用例，它显示了问题：--收缩或展开预览窗格以查看

看来我的负利润率计算一定在什么地方出错了。非常感谢您的帮助。

将8.xxx%的侧边距设置在图像的同级而不是父级

#内部

，这样您就不需要负边距

#内部>p{
填充：0.8.571428571429%；
}
...
.对{
浮动：对；
宽度：53.75%；
左缘：5%；
右边距：0；/*希望我能理解你在找什么
我通常会尽量避免在构建页面布局时使用表，但在这种情况下，如果您想要更改宽度，可以使用表或带有div的javascript
如果您记住一条规则：首先放置固定内容，那么将灰色框粘贴在内容框的右侧并不太复杂
我所做的是让灰色框正好浮动在#内框内，它将有0个填充和边距。任何将进入的内容都将有必要的填充
注意：IE6不能正确处理侧边距，所以我总是尽量避免它们（并使用填充）
以下是我建议的代码：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#layout { width: 100%; border: none; }
#layout #sidebar { width: 180px; }
#inner { float: left; width: auto; background: rgba(0, 255, 0, 0.1); }
#inner p { padding: 0 8.571428571429%; margin: 0px; }
#sidebar { width: 180px; background: rgba(0,0,255, 0.1); }
.alignright { float: right; width: 53.75%; background: rgba(0, 0, 0, 0.5); color: #fff; }

</style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" id="layout">
    <tr>
        <td id="inner" valign="top">
           <p>Fluid width with 8.571428571429% L/R padding</p>
           <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum.</p>
           <div class="alignright">Here is some aligned-right goodness.</div>
           <p>Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id.</p>
        </td>
        <td>
        <td id="sidebar" valign="top">
            <p>Fixed width 180px sidebar</p>
       </td>
    </tr>
    </table>
</body>
</html>


试验
正文{margin:0px；padding:0px；}
#布局{宽度：100%；边框：无；}
#布局#边栏{宽度：180px；}
#内部{浮点：左；宽度：自动；背景：rgba（0，255，0，0.1）；}
#内部p{填充：0 8.571428571429%；边距：0px；}
#边栏{宽度：180px；背景：rgba（0,0255,0.1）；}
.alignright{float:right；宽度：53.75%；背景：rgba（0,0,0,0.5）；颜色：#fff；}
带8.571428571429%L/R填料的油液宽度
Nam pulvinar，odio sed rhoncus suscipit，sem diam ultrices mauris，eu Consequeat purus metus eu velit.Proin metus odio，aliquam eget molestie nec，孕妇和智者。Phasellus quis是威尼斯的欧盟odio中的独角兽。Present eget neque eu eros interdum malesuada non vel leo.sed fringilla porta Egula Egustas Tincident.Nullam r是大的，是大的，是大的，是大的，是大的，是自由的
这里有一些好东西。
他是一位伟大的政治家，他是一位伟大的政治家，他是一位伟大的政治家，他是一位伟大的政治家，他是一位伟大的政治家，他是一位伟大的政治家坐在阿梅特·维利特（amet velit）的椅子上。同侧叶上的悬垂蜗壳，在尼氏节杖a中。在洛雷姆id中，是普尔文纳·拉西尼亚·康莫多（Duis pulvinar lacinia commodo）的整数
固定宽度180px边栏

如您所见，#inner元素内的元素将接收所需的填充
为了避免使用javascript，我使用了一个布局表。我必须声明，我更喜欢使用js
希望这能为你解决这个问题。你正在混合百分比和像素。尝试将你所有的绝对px
值转换为百分比。为了确保我理解，你希望页面内容的宽度不同，在右侧-你想要180像素的浮动div/图像？当你滚动时，它是否需要保持或滚动？@galchen：查看Alex的fiddle——css部分在注释中非常清楚地记录了问题。为了确保我明白，您希望灰色div与内容右侧对齐（即触摸粉色侧边栏）？@Blender我不想要侧边栏流体，它应该是固定的。这看起来很好。我受WordPress+客户的摆布，他们的技术水平可疑，所以我主要担心的是当他们插入一些意外的标签时会破裂。可能#inner>*'设置填充，再加上#inner。使用0填充将正确对齐。我将进行实验和测试发回。谢谢！有趣的想法–我喝了太多的网络标准Kool-aid，从来没有考虑过桌子。你让我想知道我是否可以用display:table和朋友来保持纯洁。你也在子元素上添加了填充，就像@mdmullinax一样。谢谢你的建议。（以下是未来搜索者希望探索的JSFIDLE:）
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#layout { width: 100%; border: none; }
#layout #sidebar { width: 180px; }
#inner { float: left; width: auto; background: rgba(0, 255, 0, 0.1); }
#inner p { padding: 0 8.571428571429%; margin: 0px; }
#sidebar { width: 180px; background: rgba(0,0,255, 0.1); }
.alignright { float: right; width: 53.75%; background: rgba(0, 0, 0, 0.5); color: #fff; }

</style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" id="layout">
    <tr>
        <td id="inner" valign="top">
           <p>Fluid width with 8.571428571429% L/R padding</p>
           <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum.</p>
           <div class="alignright">Here is some aligned-right goodness.</div>
           <p>Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id.</p>
        </td>
        <td>
        <td id="sidebar" valign="top">
            <p>Fixed width 180px sidebar</p>
       </td>
    </tr>
    </table>
</body>
</html>