将元素向右移动

-1

我有一个网站：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%; 
}

来源

2014-09-19 PodGom

有没有什么可以提供再现这个问题的一个片段什么办法？ – Zack 2014-09-19 16:11:19

你的代码非常大，你可以把它切下来吗？ – 2014-09-20 15:48:18

先给风格style="float: right;"到div。如果您向我们展示您的HTML，那将是非常好的

来源

2014-09-19 16:09:22 BNN

发生这种情况是因为您的宽度设置为50％。只要您放入保证金，它就会将股利下移。

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

如果你不喜欢在较小的分辨率下发生了什么，你可以在css中应用@media方法。

来源

2014-09-19 16:16:15 Richard

如何让我的媒体查询显示页面的一半？ – PodGom 2014-09-20 14:45:22

查找字符串代码Layout20_5并添加风格

例子：

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

来源

2014-09-19 16:24:00

将元素向右移动

回答

相关问题