Home >Web Front-end >HTML Tutorial >CSS modification, how to change the original one column to two columns_html/css_WEB-ITnose

CSS modification, how to change the original one column to two columns_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:23:001118browse

<style type="text/css"> #vote-show{ border:1px solid #e5e5e5; padding:0 1px; color:#535353}#vote-show h2{background:url("{IMG_PATH}vote/show_bg.png") repeat-x 0 0;height:26px; line-height:26px; padding-left:10px}#vote-show h2 span{font-size:14px;background:url("{IMG_PATH}vote/vote_bg.gif") no-repeat scroll 0 1px transparent;padding-left:18px; color:#145aa3; }#vote-show h3{ font-size:12px; font-weight:normal; line-height:26px; height:26px}#vote-show .content{ padding:8px 10px 15px}.vote_bar{width:50%; height:13px; border:1px solid #999; position:relative; overflow:hidden; margin-bottom:8px; background-color:#f6f6f7}.vote_bar div{background: url({IMG_PATH}admin_img/x_bg.png) repeat-x left -194px; float: left; position:relative; height:16px;_height:13px}.vote_bar span{display:block; position:absolute; left:0; top:0; width:50%; text-align:center; height:16px; font-size:10px; line-height:12px; vertical-align:middle; z-index:200}</style> 



Please tell me how to modify it to achieve the picture effect. Thank you


Reply to the discussion (solution)

You can set float, width < Container width/2
There is no HTML code, it’s hard to say

Originally, yours was a column. You framed it with a div, then set the width to 50%, and then added a div next to it. , which is the second column, but the width of the other div is 50%, and it needs to be float:right.

Fix the size float: left and it will be arranged automatically

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn