向右移动元素答案

【问题标题】：move element to the right向右移动元素
【发布时间】：2014-09-20 23:59:53
【问题描述】：

我有一个网站：viewplus.kr/touch 并且文章的右侧部分离左侧太远了。如果我在css中使用margin-left，整个div框都移到了底部，我想不出任何其他的解决方案。请帮忙！

{html代码}

<!DOCTYPE html>
<link href='layout.css' rel='stylesheet' type='text/css' />
<html>

<head>
    <link rel="shortcut icon" href="../favicon.ico">
    <title>Touch</title>
</head>
<body>
    <div class=templateholder>
        <header>
            <div class=Layout_header><p class="title"><a href="/about" class="fade"> Touch </a></p> </div>
        </header>
        <div class="touchintro">
            <div class=Layout_4>
                <br />
                <br />
                <br />

                <p class="subtitle">
                    Just touch.
                </p>

                <p>우리의 Touch가 당신에게 닿기를.</p>
                <br />
                <p><a href="/all" class="fade">Touch to view+</a></p>

            </div>
        </div>
        <div class=Layout_5 style="margin-left: -1px;">
            <p class="articletitle">article1</p>
            <p><a href="/test.html" style="color: #676767" class="fade"><font color="#676767">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, <br /> consectetur, adipisci velit ...</font></a></p>
            <br />
            <p class="articletitle">article2</p>
            <p><a href="/test.html" style="color: #676767" class="fade"><font color="#676767">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, <br /> consectetur, adipisci velit ...</font></a></p>
            <br />
            <p class="articletitle">article3</p>
            <p><a href="/test.html" style="color: #676767" class="fade"><font color="#676767">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, <br /> consectetur, adipisci velit ...</font></a></p>
            <br />

        </div>
        <div class=Layout_1><a href="/apple"><img src="apple.jpg" class="fade" /></a></div>
        <div class=Layout_2><a href="/google"><img src="google.jpg" class="fade" /></a></div>
        <div class=Layout_3><a href="/microsoft"><img src="microsoft.jpg" class="fade" /></a></div>
        <div class=Layout_6><a href="/etc"><img src="etc.jpg" class="fade" /></a></div>
    </div>
</body>

</html>

{CSS代码}

        @font-face {
    font-family: ngwotf;
    src: url(../NanumGothic.otf);
}

/* unvisited link */
a:link {
    color: magenta;
}

/* visited link */
a:visited {
    color: magenta;
}


.subtitle {
    font-size: 200%;
}

a {
    text-decoration: none;
}

.title {
    font-size: 160%;
    color: magenta;
}

.articletitle {
    font-size: 110%;
    color: magenta;
}

.touchintro {
    font-size: 150%;
    color: #676767;
}

body {
    font-family: NanumGothic,"나눔고딕",ngwotf,ngttf,ngeot;
    background: #F2F2F2;
}

.templateholder {
    margin-left: 0px;
    margin-right: 0px;
    width: initial;
}

body {
    text-align: center;
}

.fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

    .fade:hover {
        opacity: 0.5;
    }

.Layout_5 {
    float: right;
    text-align: left;
    color: #676767;
    margin-top: 10px;
    margin-bottom: 10px;
}



.Layout_1 {
    width: 25%;
    background-color: #F2F2F2;
    height: 200px;
    float: left;
}

.Layout_2 {
    width: 25%;
    background-color: #F2F2F2;
    float: left;
    height: 200px;
}

.Layout_3 {
    width: 25%;
    background-color: #F2F2F2;
    float: left;
    height: 200px;
}

.Layout_4 {
    width: 50%;
    background-color: #F2F2F2;
    float: left;
    height: 70%;
}

.Layout_5 {
    width: 50%;
    background-color: #F2F2F2;
    float: left;
    height: 70%;
    link:"black"
}

.Layout_6 {
    width: 25%;
    background-color: #F2F2F2;
    float: left;
    height: 200px;
}

.Layout_header {
    background-color: #F2F2F2;
    width: 100%;
    height: 10%;
}

【问题讨论】：

有什么方法可以提供一个重现此问题的 sn-p？
你的代码很大，能不能删减一下？

标签： html css margin

【解决方案1】：

尝试为 div 赋予样式 style="float: right;"。如果您向我们展示您的 HTML，那就太好了

【讨论】：

【解决方案2】：

发生这种情况是因为您的宽度设置为 50%。只要您输入边距，它就会将 div 向下移动。

去掉文章div上的宽度，你可以编辑页边距。

如果您不喜欢在较小分辨率下发生的情况，您可以在 css 中应用 @media 方法。

【讨论】：

如何让我的媒体查询显示一半页面？

【解决方案3】：

在代码Layout20_5中查找字符串并添加style

例子：

<div class="Layout20_5" style="margin-left: -40px;">

【讨论】：