Квадрат внутри квадрата css

Как поместить круг внутри квадратной коробки в CSS?

У меня есть веб-страница, созданная в HTML и CSS, в которой я хочу поместить круг в квадратный квадрат. Ниже приведена fiddle для веб-страницы. В этот момент я могу сделать квадрат, содержащий несколько слов, но я не могу поместить круг в квадратный квадрат. Вот изобразительное изображение того, что я хочу. Коды HTML и CSS, которые я использую для квадратных квадратов:

 
 
Will profile, CEO
 
Say something inspiring will
 
 
Jacks Profile, CFO
 
Say something inspiring jack
 
 
Zeeshan, CTO
 
Say something inspiring
 
 
Whoever yall hire next
 
Say something inspiring
 
 
 

4 ответа

Добавьте новый элемент и стиль с помощью css. Таким образом вы можете включить в него контент и изображения.

.rectangles .rectangle < border-radius: 10px; display: inline-block; margin-bottom: 30px; margin-right: 5px; width: 350px; height: 100px; border: 1px solid #000; background-color: white; padding: 10px 10px 10px 100px; position: relative; >.rectangles .rectangle .circle

 
 
Will profile, CEO
 
Say something inspiring will
 
 
Jacks Profile, CFO
 
Say something inspiring jack
 
 
Zeeshan, CTO
 
Say something inspiring
 
 
Whoever yall hire next
 
Say something inspiring
 
 

.rectangle < box-sizing: border-box; display: inline-block; width: 40%; border:1px solid #ccc; border-radius: 5px; margin-bottom: 5px; position: relative; >.rectangle:before < content: ''; width: 50px; height: 50px; border-radius: 100%; position: absolute; background-color: #ccc; top: 50%; transform: translateY(-50%); >p

 
 
Will profile, CEO
 
Say something inspiring will
 
 
Jacks Profile, CFO
 
Say something inspiring jack
 
 
Zeeshan, CTO
 
Say something inspiring
 
 
Whoever yall hire next
 
Say something inspiring
 
 

• Прежде всего jQuery и tether файлы js должны быть определены до bootstrap , чтобы они работали правильно.
• Добавлен circle с помощью элемента :before psuedo в rectangle — см. стили, которые я добавил:

.rectangles .rectangle < border-radius: 10px; display: inline-block; margin-bottom: 30px; margin-right: 5px; width: 350px; height: 100px; border: 1px solid #000; background-color: white; position: relative; /* ADDED THIS */ padding: 15px 0 0 90px; /* ADDED THIS */ >.rectangles .rectangle:before < /* ADDED THIS */ display: block; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); content: ''; width: 50px; height: 50px; border-radius: 100%; background-color: #eee; >

Здесь обновлен jsfiddle , а также демонстрационная версия ниже:

html, body < border: 0; margin: 0; height: 100%; min-height: 100%; >/**************Nav Bar Start **************/ .bg-faded < background-color: #1072B8; >.navbar-light .navbar-nav .nav-link < color: white !important; >.nav-item-insurance < color: white !important; margin-left: 20px; padding-top: 2px; font-size: 0.875em; >.nav-item-ourstory < color: white !important; margin-left: 20px; padding-top: 2px; font-size: 0.875em; >.nav-item-login-signup < font-size: 0.875em; color: white !important; margin-left: 20px; padding-top: >.nav-item-getcovered < border-color: #EF7440; margin-left: 10px; border-style: solid; color: white; padding-left: 4px; padding-bottom: 2.5px; padding-right: 4px; font-size: 0.750em; padding-top: 4.5px; letter-spacing: .30em; font-family: Adelle PE; >@media screen and (max-width: 991px) < .nav-item < font-family: AvantGarde; letter-spacing: .30em; color: white !important; margin-left: 80px; >.nav-item-getcovered < border-style: solid; border-width: 5px; padding-left: 40px; padding-right: 40px; width: 195px; border-color: #EF7440; margin-left: 70px; >> /**************Nav Bar Finish **************/ .container < width: 100% !important; >.col-lg-6 < height: 850px; >.sections a < text-decoration: none; position: relative; display: inline-block; color: #EF7440; font-family: "AvantGarde"; font-size: 2.625em; font-weight: bold; letter-spacing: .24em; >.sections a:after < content: ""; height: 5px; width: 50%; background-color: #EF7440; position: absolute; bottom: -.7em; left: 50%; transform: translate(-50%); >#insurance < display: flex; align-items: center; background-size: 100% 100%; justify-content: center; background-image: url(../assets/img/Uploads/insurance.png); >#our-story < display: flex; background-size: 100% 100%; align-items: center; justify-content: center; background-image: url(../assets/img/Uploads/our%20story.png); >#insurance:hover < display: flex; color: #EF7440; font-style: italic; align-items: center; justify-content: center; background-image: url(../assets/img/Uploads/insurance-colour.png); background-size: 100% 100%; >#insurance a:hover < color: #EF7440; text-decoration: none; >#our-story a:hover < color: #EF7440; text-decoration: none; >#our-story:hover < display: flex; color: #EF7440; font-style: italic; align-items: center; justify-content: center; background-image: url(../assets/img/Uploads/our%20story-colour.png); background-size: 100% 100%; >/*Athletes (Start) */ .athletes h1 < text-transform: uppercase; font-weight: bold; font-style: italic; font-size: 1.250em; font-family: "Adelle PE"; letter-spacing: 0.300em; padding-top: 40px; padding-bottom: 5px; >.athletes h2 < font-style: italic; line-height: 0.89; font-size: 1.250em; font-family: "Adelle PE"; color: white; letter-spacing: 0.300em; padding-top: 5px; padding-bottom: 5px; >.athletes p < line-height: 1.379; font-size: 0.875em; font-family: "Adelle PE"; letter-spacing: 0.300em; padding-top: 80px; padding-bottom: 70px; >@media screen and (max-width: 991px) < .athletes p < padding-bottom: 40px; >> .athletes h1, .athletes h2, .athletes p < margin: 0px !important; color: white; >.chris-d < background-image: url(../assets/img/Uploads/chris-davenport.png); background-size: cover; background-repeat: no-repeat; height: 384px; >.leticia < background-image: url(../assets/img/Uploads/leticia-bufoni.png); background-size: cover; background-repeat: no-repeat; height: 384px; >.leticia p, .nfl p < padding-right: 650px; >@media screen and (max-width: 991px) < .nfl p < padding-right: 400px; >> @media screen and (max-width: 991px) < .leticia p < padding-right: 350px; >> .leticia h1, .nfl h1, .leticia h2, .nfl h2, .leticia p, .nfl p < margin-left: 25px !important; >.chris-g < background-image: url(../assets/img/Uploads/chris-gunnarson.png); background-size: cover; background-repeat: no-repeat; height: 384px; >.chris-d p, .chris-g p < text-align: right; >.chris-d h1, .chris-g h1, .chris-d h2, .chris-g h2 < text-align: right; >.chris-g h1, .chris-d h2, .chris-g h2, .chris-g p < padding-left: 740px; padding-right: 30px; >.chris-d h1 < padding-top: 45px; padding-right: 30px; >@media screen and (max-width: 991px) < .chris-g p < padding-left: 340px; padding-right: 30px; >> @media screen and (max-width: 991px) < .chris-g h1 < padding-left: 0px; >> @media screen and (max-width: 991px) < .chris-d h1 < padding-left: 0px; >> .chris-d p < padding-top: 40px; padding-left: 840px; padding-bottom: 40px; padding-right: 30px; >.chris-d #readmore-button-right < font-family: "Adelle PE"; font-style: normal; width: 550px; float: right; margin-top: -10px !important; border-width: 3px; text-transform: uppercase; padding-top: 7px; padding-bottom: 7px; border-color: white; margin-right: 30px !important; border-style: solid; padding-left: 200px; padding-right: 200px; line-height: 2.109; font-size: 16px; text-align: center; >.chris-d #readmore-button-right:hover < font-style: italic; font-weight: bold; >@media screen and (max-width: 991px) < .chris-d p < padding-left: 500px; width: 950px; padding-top: 40px; padding-bottom: 25px; padding-right: 30px; >> #watch-ted-talk < padding-top: 10px; padding-bottom: 50px; >.marketplace-background < background-image: url(../assets/img/Uploads/nfl-athlete.png); background-size: cover; color: white; font-size: 30px; font-weight: bold; background-repeat: no-repeat; height: 384px; display: flex; align-items: center; justify-content: center; >#rtm < text-align: center; >/***** Searchbar Start *****/ .form-wrapper < background-color: #f6f6f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8); background-image: linear-gradient(top, #f6f6f6, #eae8e8); border-color: #dedede #bababa #aaa #bababa; border-style: solid; border-width: 1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -moz-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; margin-left: auto; overflow: hidden; margin-top: 40px; margin-right: auto; padding: 8px; width: 450px; >.form-wrapper #search < border: 1px solid #CCC; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #999; float: left; font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif; height: 50px; padding: 10px; width: 320px; >.form-wrapper #search:focus < border-color: #aaa; -webkit-box-shadow: 0 1px 1px #bbb inset; -moz-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset; outline: 0; >.form-wrapper #search:-moz-placeholder, .form-wrapper #search:-ms-input-placeholder, .form-wrapper #search::-webkit-input-placeholder < color: #999; font-weight: normal; >.form-wrapper #submit < background-color: #0483a0; border-radius: 10px; background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); border: 1px solid #00748f; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF; color: #fafafa; cursor: pointer; height: 48px; float: right; font: 15px Arial, Helvetica; padding: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); width: 100px; >.form-wrapper #submit:hover, .form-wrapper #submit:focus < background-color: #31b2c3; background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3)); background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3); background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); background-image: -ms-linear-gradient(top, #0483a0, #31b2c3); background-image: -o-linear-gradient(top, #0483a0, #31b2c3); background-image: linear-gradient(top, #0483a0, #31b2c3); >.form-wrapper #submit:active < -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; outline: 0; >.form-wrapper #submit::-moz-focus-inner < border: 0; >/***** Searchbar Finish *****/ /**** Sections Start ****/ .sections < background-color: black; >/**** Contents start ****/ /**** About Homesail start ****/ .contents < background-color: black; >.about-homesail .headline-text:before < border-top: 1px solid #1072B8; display: block; position: relative; top: -25px; margin: 0 auto; width: 50%; content: ""; >.about-homesail .headline-text < text-align: center; font-size: 24px; color: #1072B8; padding-top: 60px; font-weight: bold; >.about-homesail .company-info < padding-left: 100px; padding-right: 100px; padding-top: 100px; font-style: italic; font-size: 20px; color: #1072B8; >.rectangles < margin-left: 300px; margin-right: 334px; >.rectangles .rectangle < border-radius: 10px; display: inline-block; margin-bottom: 30px; margin-right: 5px; width: 350px; height: 100px; border: 1px solid #000; background-color: white; position: relative; /* ADDED THIS */ padding: 15px 0 0 90px; /* ADDED THIS */ >.rectangles .rectangle:before < /* ADDED THIS */ display: block; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); content: ''; width: 50px; height: 50px; border-radius: 100%; background-color: #eee; >/**** About Homesail finish ****/ /**** Departments Start *****/ .departments .headline-text:before < border-top: 1px solid #1072B8; display: block; position: relative; top: -25px; margin: 0 auto; width: 50%; content: ""; >.departments .headline-text < text-align: center; font-size: 24px; color: #1072B8; padding-top: 60px; font-weight: bold; >/**** Departments Finish *****/ /**** University students start ****/ .university-students .headline-text:after < border-top: 1px solid #1072B8; display: block; position: relative; top: 40px; margin: 0 auto; width: 50%; content: ""; >.university-students .headline-text < text-align: center; font-size: 24px; color: #1072B8; padding-top: 60px; font-weight: bold; >.university-students .company-info < padding-left: 250px; padding-right: 250px; padding-top: 100px; font-style: italic; font-size: 20px; color: #1072B8; >/**** University Students finish ****/ /**** Contents Finish ****/

Источник

Квадраты внутри квадрата с помощью CSS

Идея в том, чтобы иметь эту гибкость, поэтому, если у меня есть 2 маленьких квадрата, результаты должны быть такими:

Кто-нибудь может попытаться помочь мне с этим?

2 ответа

Это может быть решением. Он использует ваш неизмененный HTML, но с совершенно другим CSS. Изменение height и width внешнего контейнера все равно приведет к появлению 4 маленьких квадратов, если ширина и высота внешнего контейнера равны.

* < box-sizing: border-box; >.date-grid < width: 100px; height: 100px; background: #eee; display: flex; flex-direction: column; >.vrs22 < width: 100%; height: 100%; background: green; border: none; padding: 0; >time < display: block; height: 75%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; >.smallHolder < width: 100%; height: 25%; display: flex; >.smallHolder>div < width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; >.small1 < background: #fb0; >.small2 < background: #bf0; >.small3 < background: #f07; >.small4

С разным размером контейнера:

* < box-sizing: border-box; >.date-grid < width: 150px; height: 150px; background: #eee; display: flex; flex-direction: column; >.vrs22 < width: 100%; height: 100%; background: green; border: none; padding: 0; >time < display: block; height: 75%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; >.smallHolder < width: 100%; height: 25%; display: flex; >.smallHolder>div < width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; >.small1 < background: #fb0; >.small2 < background: #bf0; >.small3 < background: #f07; >.small4

И вариант только с двумя квадратами внизу:

* < box-sizing: border-box; >.date-grid < width: 100px; height: 100px; background: #eee; display: flex; flex-direction: column; >.vrs22 < width: 100%; height: 100%; background: green; border: none; padding: 0; >time < display: block; height: 50%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; >.smallHolder < width: 100%; height: 50%; display: flex; >.smallHolder>div < width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; >.small1 < background: #fb0; >.small2

Я предлагаю попробовать использовать: .date-grid , который обернет все эти элементы. Затем один большой квадрат будет иметь width:100%;height:80%; или что-то еще, наконец, маленькие .smallHolder затем для фактических маленьких элементов width:19%; воздержитесь от использования кнопки как чего-то, чтобы обернуть это вокруг. Возможно, сделайте: вот и все.

Скажите мне, если у вас есть какие-либо вопросы.

Источник

Создайте квадрат квадратов внутри большего квадрата

Мне удалось завершить почти все это. Вот скрипка, показывающая то, что у меня есть до сих пор… К сожалению, я не могу поместить квадраты бок о бок (попробовал float), и вместо этого они появляются в вертикальном столбце.

.content-container < max-width: 570px; height: auto; border-radius: 10px; border-top: 50px solid #e81354; background: #ffffff; display: block; >.inner-square

Ваша проблема заключается в том, что вы устанавливаете width 50% но не минус 10px маржа, также ваш HTML-код имеет разрывы строк между div s, поэтому вы должны установить font-size 4px 0 для контейнера (чтобы исключить 4px строки ломать):

.content-container < . font-size:0; >.inner-square < background: #cccccc; width: calc(50% - 8px); height: calc(50% - 8px); margin: 5px; display:inline-block; >.inner-square:nth-child(even) < margin-left:0; >.inner-square:nth-child(n+2)

Demo.

1. Вам нужно добавить float:left to .inner-square .
2. Ваши квадраты не принимают форму, которую вы хотите, потому что у вас есть margin: 5px на .inner-square . Таким образом, ваши .inner-square ширины в настоящее время 50% + 50% + (4 * 5px). Поскольку они больше ширины вашего квадрата, второй квадрат занимает следующее свободное пространство: пространство под ним. Итак, попробуйте margin: 5px 0 и ваша проблема исчезнет.

Я нашел этот код, выстроил их лучше, я бы поместил стиль в css в финальной копии tho

Источник

Сетка из адаптивных (responsive) квадратов

Мне интересно, я бы хотел создать макет с responsive квадратами. Каждый квадрат будет иметь вертикальное и горизонтальное выравнивание содержимого. Ниже показан конкретный пример .. Перевод вопроса: Grid of responsive squares @garethdn

1 ответ 1

Вы можете создать адаптивную сетку квадратов с вертикально и горизонтально центрированным контентом только с помощью CSS.

Я объясню в пошаговом процессе, как это сделать, но сначала посмотрите здесь две демоверсии того, как вы сможете это реализовать:

Теперь давайте посмотрим, как сделать эти причудливые responsive квадраты!

1. Создание адаптивных квадратов:

Трюк для сохранения пропорций 1:1 — square (или любого другого соотношения сторон) заключается в использовании процента padding-bottom .

Примечание: вы можете использовать top padding или top/bottom margin , но фон элемента не будет отображаться.

Поскольку top padding рассчитывается в соответствии с шириной родительского элемента (см. MDN для справки), высота элемента будет изменяться в соответствии с его шириной.

Теперь вы можете сохранять пропорции в соответствии с шириной.

На этом этапе вы можете применить код:

Вот простой пример раскладки квадратов 3 * 3 с использованием кода выше

С помощью этой методики, вы можете сделать любое другое соотношение сторон, здесь приведена таблица, в которой заданы значения bottom padding в соответствии с соотношением сторон и шириной 30%.

 Aspect ratio | padding-bottom | for 30% width ------------------------------------------------ 1:1 | = width | 30% 1:2 | width x 2 | 60% 2:1 | width x 0.5 | 15% 4:3 | width x 0.75 | 22.5% 16:9 | width x 0.5625 | 16.875% 

2. Добавление содержимого внутри квадратов

Поскольку вы не можете добавлять содержимое непосредственно внутри квадратов (это увеличит их высоту, а квадраты не будут квадратами больше), вам нужно создать дочерние элементы (для этого примера я — использую divs) внутри них с position:abolute;
И размещаю контент в дочерних элементах.
Это выведет контент из потока и сохранит размер квадрата.

Не забудьте добавить position:relative; на родительских divs , так как absolute children размещаются / оцениваются относительно своего родителя.

Давайте добавим некоторый контент в нашу сетку 3×3 квадратов:

 
 
.. CONTENT HERE ..
 
 . and so on 9 times for 9 squares . 

3.Центрирование контента

Горизонтально:

Это довольно просто, вам просто нужно добавить text-align: center в `.content.

Вертикальное выравнивание:

Это становится серьезным! Весь фокус в том, чтобы использовать

display:table; /* and */ display:table-cell; vertical-align:middle; 

Но мы не можем использовать display: table; На .square или .content divs , потому что это противоречит position:absolute; Поэтому нам нужно создать два дочерних элемента внутри .content divs . Наш код будет обновлен следующим образом:

 
 
 
 
. CONTENT HERE .
 
 
 
 . and so on 9 times for 9 squares . 

.square < float:left; position: relative; width: 30%; padding-bottom : 30%; /* = width for a 1:1 aspect ratio */ margin:1.66%; overflow:hidden; >.content < position:absolute; height:80%; /* = 100% - 2*10% padding */ width:90%; /* = 100% - 2*5% padding */ padding: 10% 5%; >.table < display:table; height:100%; width:100%; >.table-cell

Мы закончили, и мы можем посмотреть на результат здесь:

Источник