Skip to content

Instantly share code, notes, and snippets.

@dongyuwei

dongyuwei/media-object-css-layout.html

Last active March 30, 2016 02:47
Show Gist options
  • Save dongyuwei/781ad22d8625ee2982f1d8b246689bcb to your computer and use it in GitHub Desktop.
Save dongyuwei/781ad22d8625ee2982f1d8b246689bcb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
media-object-css-layout.html
<html>
<head>
<title>test css</title>
<meta charset="utf-8"/>
<style>
.line {
overflow: hidden;
width: 50%;
}
.line .item {
float: left;
width: 25%;
margin-bottom: 10px;
}
.line .item .txt{
overflow: hidden;
display: block;
}
.left{
float: left;
}
/*table table-cell width calc() */
</style>
</head>
<body>
<div class="line">
<div class="item">
<span class='left'>
<input type="radio"/>
<span> A. </span>
</span>
<span class="txt">西安智园软件开发管理有限公司</span>
</div>
<div class="item">
<span class='left'>
<input type="radio"/>
<span> A. </span>
</span>
<span class="txt">西安智园软件开发管理有限公司</span>
</div>
<div class="item">
<span class='left'>
<input type="radio"/>
<span> A. </span>
</span>
<span class="txt">西安智园软件开发管理有限公司</span>
</div>
<div class="item">
<span class='left'>
<input type="radio"/>
<span> A. </span>
</span>
<span class="txt">西安智园软件开发管理有限公司</span>
</div>
<div class="item">
<span class='left'>
<input type="radio"/>
<span> A. </span>
</span>
<span class="txt">西安智园软件开发管理有限公司</span>
</div>
</div>
</body>
</html>
@dongyuwei
Copy link
Author

  1. http://stackoverflow.com/questions/16098037/best-way-to-align-left-after-line-break
  2. http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

table + table-cell + calc() can resolve the layout problem; but I prefer to apply the media-object pattern. simple and powerful.

. item's width is responsive, thus the .txt's width is responsive, too.

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