Skip to content

Instantly share code, notes, and snippets.

@absent1706

absent1706/html-use-display-table.html

Created September 7, 2016 13:38
Show Gist options
  • Save absent1706/91ff27d5be649e7a6d60fd19377184fb to your computer and use it in GitHub Desktop.
Save absent1706/91ff27d5be649e7a6d60fd19377184fb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html-use-display-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.display-table-cell {
display: table-cell;
}
/* Well known hack for fitting width to content http://stackoverflow.com/a/27846774 */
.table-cell-fit-width {
width: 1%;
white-space:nowrap;
}
</style>
</head>
<body>
<!-- пример 1. -->
<div>
<h3 class="display-table-cell" style="background-color: grey">
эта штука растягивается на всю ширину
</h3>
<div class="display-table-cell table-cell-fit-width">
<a href="#" class="glyphicon glyphicon-arrow-up"></a>
<a href="#" class="glyphicon glyphicon-arrow-down"></a>
<a href="#" class="icon-trash after-color-red1"></a>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
<!-- пример 2. текст справа от картинки -->
<div>
<div class="display-table-cell table-cell-fit-width">
<img src="http://dummyimage.com/400x400" style="width: 100px">
</div>
<div class="display-table-cell table-cell-fit-width vertical-align-top">
<h4 class="text-center">
Длинный заголовок
</h4>
<div class="text-center">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
</div>
<div class="display-table-cell" style="background-color: lightgreen"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment