小编Dre*_*ewK的帖子

两个盒子,并排,每个50%,但两者都稍长,不在同一条线上？

我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50%时,每个盒子要扩展大约10px,宽度大于50%.我究竟做错了什么？

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px;
    margin: 0px;
    position: relative;
}

#rightside {
    width: 50%;
    display: inline-table;
    background-color: #018DCA;
    float: left;
    padding: 20px;
    margin-left: 50%;
    position: relative;
}

Run Code Online (Sandbox Code Playgroud)

...

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css width

Dre*_*ewK

2015 06-23

8
推荐指数

2
解决办法

309
查看次数

如何根据盒子的背景调整此代码？

名为"sopanha"的StackOverflow用户表示,这可以用于获取页面上的更改背景.如何调整以应用盒子的背景？

谢谢.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<header></header>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

css

Dre*_*ewK

lucky-day

-1
推荐指数

1
解决办法

24
查看次数