將元素向右移動

-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

將元素向右移動

回答

相關問題