Question

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

{html code}

<!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 code}

        @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%;
}

Answer 1

尝试将样式style="float: right;"赋予div。如果您向我们展示您的HTML

会很棒

Answer 2

这种情况正在发生，因为您的宽度设置为50％。一旦你放入保证金，它就会将div移动。

摆脱文章div的宽度，你可以编辑边距。

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

Answer 3

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

示例：

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

将元素移到右边

3 个答案: