无法正确镜像 div
Can't get a div mirrored properly
我正在制作一个站点,当您将鼠标悬停在 div 上方时,它们会扩展,扩展后,它们会在内部显示 link。这与向左延伸的 div 完美配合,但是,当我想镜像 div 并制作一个向右延伸的精确的 [=33] 时,我无法得到 [=33] =] 正确放置。
.hoofdvak
{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
text-align: center;
position: relative;
}
.linkerwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.rechterwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.inhoudlinks
{
border-radius: 50px 10px 10px 50px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.4;
padding: 10px;
width: 40%;
height: 95%;
transition: all 1s;
float: right;
overflow: hidden;
}
.inhoudlinks:hover
{
opacity: 1.0;
width: 80%;
}
.tekstlinks
{
height: 100%;
width: 350px;
float: left;
}
.inhoudlinklinks
{
position: absolute;
padding-left: 48%;
padding-top: 17%;
}
img.inhoudlinklinks
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinklinks:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
.inhoudrechts
{
border-radius: 10px 50px 50px 10px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.4;
padding: 10px;
width: 40%;
height: 95%;
transition: all 1s;
float: left;
overflow: hidden;
}
.inhoudrechts:hover
{
opacity: 1.0;
width: 80%;
}
.tekstrechts
{
height: 100%;
width: 350px;
float: right;
}
.inhoudlinkrechts
{
position: absolute;
padding-top: 17%;
padding-right: 48%;
}
img.inhoudlinkrechts
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinkrechts:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
令我困惑的是 "inhoudlinklinks" 使用 "padding-left: 48%" 可以完美工作,而 "padding-right: 48%" 对 "inhoudlinkrechts" 没有任何作用。
我不知道如何管理从 "inhoudlinkrechts" 到其父级 div "inhoudrechts" 右边界的距离。
在左侧,它超出 div,并且仅在悬停时可见。我想在右边也一样。
希望有人能帮忙
我认为你应该给 inhoudrechts right-padding 并使 child div 浮动正确。并给出 child div 宽度:100%;
我有点把它设置为像素的更多距离。
html
{
margin: 10;
background-image: url("../images/background.png");
}
body
{
margin: 0;
font-family: "Verdana", Geneva, sans-serif;
color: #000000;
}
img
{
width: 100%;
}
h1
{
font-size: 30pt;
font-style: bold;
font-family: "Courier New", Courier, monospace;
letter-spacing: 5px;
text-shadow: 1px 2px 1px #79797B;}
}
h2
{
font-size: 20pt;
font-style: bold;
}
h3
{
font-size: 16pt;
font-style: bold;
}
p
{
font-size: 12pt;
}
/* Optie met balk*/
#header
{
text-align: center;
background-color: #BEBEBE;
opacity: 1.0;
overflow: hidden;
border: 2px solid #FFFFFF;
border-radius: 50px 50px 50px 50px;
width: 750px;
font-family: "Courier New", Courier, monospace;
margin: 0 auto;
text-shadow: 1px 2px 1px #FFFFFF;
}
/* Optie zonder balk
#header
{
text-align: center;
overflow: hidden;
color: #BEBEBE;
}
*/
#body
{
text-align: center;
overflow: hidden;
margin: 0 auto;
}
#footer
{
text-align: center;
background-color: #BEBEBE;
opacity: 0.4;
overflow: hidden;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
float: bottom;
}
.wrap
{
height: 600px;
width: 100%;
padding: 0px;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
}
.hoofdvak
{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
text-align: center;
position: relative;
}
.linkerwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.rechterwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.inhoudlinks
{
border-radius: 50px 10px 10px 50px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.6;
padding: 10px;
width: 350px;
height: 95%;
transition: all 1s;
float: right;
overflow: hidden;
}
.inhoudlinks:hover
{
opacity: 1.0;
width: 700px;
}
.tekstlinks
{
height: 100%;
width: 350px;
float: left;
}
.inhoudlinklinks
{
position: absolute;
padding-left: 230px;
padding-top: 75px;
}
img.inhoudlinklinks
{
width:100%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinklinks:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
.inhoudrechts
{
border-radius: 10px 50px 50px 10px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.6;
padding: 10px;
width: 350px;
height: 95%;
transition: all 1s;
float: left;
overflow: hidden;
position: relative
}
.inhoudrechts:hover, .inhoudrechts:active
{
opacity: 1.0;
width: 700px;
}
.tekstrechts
{
height: 100%;
width: 350px;
float: right;
}
.inhoudlinkrechts
{
position: absolute;
width: 400px;
right: 225px;
float: top;
margin: 10px;
display: inline-block;
}
.inhoudlinkrechts2
{
position: absolute;
width: 400px;
right: 225px;
top: 50%;
float: top;
margin: 10px;
display: inline-block;
}
img.inhoudlinkrechts
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinkrechts:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
谢谢你的帮助
我正在制作一个站点,当您将鼠标悬停在 div 上方时,它们会扩展,扩展后,它们会在内部显示 link。这与向左延伸的 div 完美配合,但是,当我想镜像 div 并制作一个向右延伸的精确的 [=33] 时,我无法得到 [=33] =] 正确放置。
.hoofdvak
{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
text-align: center;
position: relative;
}
.linkerwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.rechterwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.inhoudlinks
{
border-radius: 50px 10px 10px 50px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.4;
padding: 10px;
width: 40%;
height: 95%;
transition: all 1s;
float: right;
overflow: hidden;
}
.inhoudlinks:hover
{
opacity: 1.0;
width: 80%;
}
.tekstlinks
{
height: 100%;
width: 350px;
float: left;
}
.inhoudlinklinks
{
position: absolute;
padding-left: 48%;
padding-top: 17%;
}
img.inhoudlinklinks
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinklinks:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
.inhoudrechts
{
border-radius: 10px 50px 50px 10px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.4;
padding: 10px;
width: 40%;
height: 95%;
transition: all 1s;
float: left;
overflow: hidden;
}
.inhoudrechts:hover
{
opacity: 1.0;
width: 80%;
}
.tekstrechts
{
height: 100%;
width: 350px;
float: right;
}
.inhoudlinkrechts
{
position: absolute;
padding-top: 17%;
padding-right: 48%;
}
img.inhoudlinkrechts
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinkrechts:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
令我困惑的是 "inhoudlinklinks" 使用 "padding-left: 48%" 可以完美工作,而 "padding-right: 48%" 对 "inhoudlinkrechts" 没有任何作用。
我不知道如何管理从 "inhoudlinkrechts" 到其父级 div "inhoudrechts" 右边界的距离。
在左侧,它超出 div,并且仅在悬停时可见。我想在右边也一样。
希望有人能帮忙
我认为你应该给 inhoudrechts right-padding 并使 child div 浮动正确。并给出 child div 宽度:100%;
我有点把它设置为像素的更多距离。
html
{
margin: 10;
background-image: url("../images/background.png");
}
body
{
margin: 0;
font-family: "Verdana", Geneva, sans-serif;
color: #000000;
}
img
{
width: 100%;
}
h1
{
font-size: 30pt;
font-style: bold;
font-family: "Courier New", Courier, monospace;
letter-spacing: 5px;
text-shadow: 1px 2px 1px #79797B;}
}
h2
{
font-size: 20pt;
font-style: bold;
}
h3
{
font-size: 16pt;
font-style: bold;
}
p
{
font-size: 12pt;
}
/* Optie met balk*/
#header
{
text-align: center;
background-color: #BEBEBE;
opacity: 1.0;
overflow: hidden;
border: 2px solid #FFFFFF;
border-radius: 50px 50px 50px 50px;
width: 750px;
font-family: "Courier New", Courier, monospace;
margin: 0 auto;
text-shadow: 1px 2px 1px #FFFFFF;
}
/* Optie zonder balk
#header
{
text-align: center;
overflow: hidden;
color: #BEBEBE;
}
*/
#body
{
text-align: center;
overflow: hidden;
margin: 0 auto;
}
#footer
{
text-align: center;
background-color: #BEBEBE;
opacity: 0.4;
overflow: hidden;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
float: bottom;
}
.wrap
{
height: 600px;
width: 100%;
padding: 0px;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
}
.hoofdvak
{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
text-align: center;
position: relative;
}
.linkerwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.rechterwrap
{
width: 47%;
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.inhoudlinks
{
border-radius: 50px 10px 10px 50px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.6;
padding: 10px;
width: 350px;
height: 95%;
transition: all 1s;
float: right;
overflow: hidden;
}
.inhoudlinks:hover
{
opacity: 1.0;
width: 700px;
}
.tekstlinks
{
height: 100%;
width: 350px;
float: left;
}
.inhoudlinklinks
{
position: absolute;
padding-left: 230px;
padding-top: 75px;
}
img.inhoudlinklinks
{
width:100%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinklinks:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
.inhoudrechts
{
border-radius: 10px 50px 50px 10px;
border: 2px solid #FFFFFF;
background-color: #BEBEBE;
opacity: 0.6;
padding: 10px;
width: 350px;
height: 95%;
transition: all 1s;
float: left;
overflow: hidden;
position: relative
}
.inhoudrechts:hover, .inhoudrechts:active
{
opacity: 1.0;
width: 700px;
}
.tekstrechts
{
height: 100%;
width: 350px;
float: right;
}
.inhoudlinkrechts
{
position: absolute;
width: 400px;
right: 225px;
float: top;
margin: 10px;
display: inline-block;
}
.inhoudlinkrechts2
{
position: absolute;
width: 400px;
right: 225px;
top: 50%;
float: top;
margin: 10px;
display: inline-block;
}
img.inhoudlinkrechts
{
width:60%;
opacity: 0.5;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
img.inhoudlinkrechts:hover
{
filter: grayscale(0%);
opacity:1;
-webkit-filter: grayscale(0%);
filter: none;
}
谢谢你的帮助