-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';А что если просто контент внутри последнего элемента просто определить по правому краю http://prntscr.com/jsxu51
вот :
<code lang="css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.wrap{
display: table;
width: 800px;
border: 1px solid #000;
}
ul{
display: table-row;
li {
display: table-cell;
padding: 10px 10px;
&:first-of-type{
width: 300px
}
&:last-child {
text-align:right;
width :100px;
background:red;
}
}
}
</code><div class="container">
<div class="blocks">
<div class="block">
Блок #1
</div>
<div class="block">
Блок #2
</div>
<div class="block">
Блок #3
</div>
<div class="block">
Блок #4
</div>
</div>
<div class="settings">
<div class="">
<label for="">Цвет</label>
<input class="color-val" type="text">
<button id="changeColor">Сменить</button>
</div>
<div class="">
<label for="">Ширина</label>
<input class="width-val" type="text">
<button id="changeWidth">Сменить</button>
</div>
<div class="">
<label for="">Высота</label>
<input class="height-val" type="text">
<button id="changeHeight">Сменить</button>
</div>
</div>
</div>$(function() {
//замена цвета блоков
$("#changeColor").click(function(){
var parmColor = $(".color-val").val();
$(".block").css( { backgroundColor: parmColor });
});
//замена ширины блоков
$("#changeWidth").click(function(){
var parmWidth = $(".width-val").val();
if (parmWidth > 40) {
$(".block").css( { width: parmWidth });
}
});
//замена высоты блоков
$("#changeHeight").click(function(){
var parmHeight = $(".height-val").val();
$(".block").css( { height: parmHeight });
});
});@media (max-width: @your-param) {
.uk-text-small,
. uk-h1 { font-size: 20px; }
}<div uk-h1="ratio:2" >
Together we can Revolutionize<br>Information Delivery
</div><div class="main-content">
<div class="title-image">
<h2>Заголовок</р2>
<img src="http:..." alt="" width="" height="" />
<div>
<div class="title-image">
<h2>Заголовок</р2>
<img src="http:..." alt="" width="" height="" />
<div>
<div>
<style>
.main-content {
display:flex;
flex-flow: row wrap
}
.title-image{
display: inherit;
flex-flow: column;
}
<style>#feedback:hover{
/* transform: rtanslate */
left:0;
transition: left .8s;
}
#feedback:hover a{
left:526px;
transition: left .8s;
}/* */
$(window).on("scroll", function() {
var scro= $(window).scrollTop();
var scr=0; // начало страницы меню студия
var scr2=849; // начало меню услуги
var scr3=1711; // начало меню дизайнеры
var scr4=2578; // начало меню работы
var scr5=4073; // начало меню контакты
/* положение скрола относительно пункта Студия */
if ( $(window).scrollTop() >= scr && scro <= scr2 ) { $('#m1').addClass('active');}
else $('#m1').removeClass('active');
/* положение скрола относительно пункта Услуги */
if ( scro > scr2 && scro <= scr3 ) { $('#m2').addClass('active');}
else $('#m2').removeClass('active');
/* положение скрола относительно пункта Дизайнеры */
if ( scro > scr3 && scro <= scr4 ) { $('#m3').addClass('active');}
else $('#m3').removeClass('active');
/* положение скрола относительно пункта Портфолио */
if ( scro > scr4 && scro <= scr5 ) { $('#m4').addClass('active');}
else $('#m4').removeClass('active');
/* положение скрола относительно пункта Контакты */
if ( scro > scr5 ) { $('#m5').addClass('active');}
else $('#m5').removeClass('active');
});
</script>