Question

我在下面有一张图片来说明我的意思。我需要粉红色的主内容列移动到黑线所在的位置。代码在下面的链接中，我已经尝试过所有种类，我需要它来保持响应式网站。

请在此处找到代码： http://jsfiddle.net/xhwdzs32/ .

Answer 1

您需要将内容div上的边距和填充更改为：

#content {
    float: left;
    margin: 1% 0% 1% 2%;
    padding: 0% 1%;
    background-color: #FFF0F5;
    width: 68%;
    height: 100%;
    border-radius: 10px;
}

这是一个小提琴示例：http://jsfiddle.net/Hive7/xhwdzs32/5/

Answer 2

修复：使用宽度

切换边距右侧

#content {
    width: 69%;
    margin-right: 0;
}

虽然你可以通过多种方式做到这一点，包括改变填充，就像其他答案一样。甚至更安全地向div添加float:right，但这是最好的选择，因为它会对整个设计产生最小的干扰，保持一致性

Answer 3

更改以下3行：

#content {
   float:right;
   margin:1% 0 1% 1%;
   width:69%;
}

小提琴：http://jsfiddle.net/xhwdzs32/6/

如何在HTML中对齐div列

3 个答案:

修复：使用宽度