Skip to content

Instantly share code, notes, and snippets.

@wang-zhijun

wang-zhijun/split_web_page_vertically.html

Last active March 16, 2016 13:32
Show Gist options
  • Save wang-zhijun/8066877 to your computer and use it in GitHub Desktop.
Save wang-zhijun/8066877 to your computer and use it in GitHub Desktop.
Download ZIP
Split web page vertically in HMTL
Raw
split_web_page_vertically.html
<html>
<head>
<style>
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
.floatstop {
clear:both;
}
</style>
</head>
<body>
<div id="column1">
<p>一つ目のコラム</p>
</div>
<div id="column2">
<p>二つめのコラム</p>
</div>
<div id="column3">
<p>三つ目のコラム</p>
</div>
<p class="floatstop">Stop float</p>
</body>
</html>
@wang-zhijun
Copy link
Author

float:left　の意味は文字左寄せじゃなく、コラムまるごと一つ左寄せる。

column2 {

    float:left;
    width: 33%;

}
のleftをrightにしたら、column2は三つ目のコラムになる

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment