float: left для элементов .columndisplay: flex для родительского элемента .container.container {
display: flex;
}.container {
position: relative;
display: flex;
}"чтобы последний элемент обрезался как на фото"
overflow-x: auto; - это если с прокруткой нужно.overflow-x: hidden;<h1> на странице может быть только один - заголовок страницы. Остальные - <h2> - <h6>
<span> или просто задаёте элементу display: inline.
elem.prepend(....)
Как в css grid добавлять ряды автоматически?
Как автоматизировать расчет шрифтов
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');
var fileinclude = require('gulp-file-include');
gulp.task('styles', function() {
return gulp.src('./app/less/main.less')
.pipe(plumber({
errorHandler: notify.onError(function(err) {
return {
title: 'Styles',
sound: false,
message: err.message
}
})
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 6 versions'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/css'))
.pipe(browserSync.stream());
});
gulp.task('html', function() {
return gulp.src('./app/html/*.html')
.pipe(plumber({
errorHandler: notify.onError(function(err) {
return {
title: 'HTML include',
sound: false,
message: err.message
}
})
}))
.pipe(fileinclude({
prefix: '@@'
}))
.pipe(gulp.dest('./app/'))
});
gulp.task('server', gulp.series('styles', 'html', function() {
browserSync.init({
server: {
baseDir: './app'
}
})
gulp.watch(['./app/**/*.html', './app/**/*.js', './app/img/*.*']).on('change', browserSync.reload);
gulp.watch('./app/less/**/*.less', gulp.series('styles'));
gulp.watch('./app/html/**/*.html', gulp.series('html'));
}))
gulp.task('default', gulp.series('server'));Как прилепить дочерний элемент к низу родителя?
.main_contacts {
...
position: absolute;
left: 0;
bottom: 0;
...
}.main {
...
display: flex;
flex-direction: column;
...
}
.main_contacts {
...
margin-top: auto;
...
}как мне указать что все эти 5 вложенный элементов будут иметь ширину 2 ячейке
grid-column: span 2;, заданного для элементов
:first-child указывает на первый элемент среди всех элементов, а не первый элемент с данным классом..landing-block__description:first-child означает элемент с классом .landing-block__description, который является первым в разметке. .landing-block__title
<img> используется как фон элементаoverflow: hidden, а изображение позиционировать абсолютно.
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
У меня есть тег svg
внутри которого код картинки
мне нужно что бы контейнер svg, и изображение были размером 75x22
почему если у svg тега из моего примера сбросить размеры и вьюбокс, изображение находится по центру
как можно сделать, что бы svg изображение всегда было по центру svg контейнера?
