Позиционирование CSS и граница треугольного div на CSS

@pokk · Регистрация: 05.05.2014

Author24 — интернет-сервис помощи студентам

Добрый день, подскажите как сделать что бы при изменении масштаба div не прыгал.
1) Есть два float div первый прижат к левой стороне(clear:left) второй прижат к первому div при увеличении масштаба всё так и сохраняется.

CSS

#div1{
    float:left;
    height: 181px;
    width: 232px;
    clear:left;
}
#div2{
    float:left;
    width: 832px;
    height: 681px;
}

Но при очень близком приближении, второй div соскакивает вниз(ниже первого div) и прижимается к левой стороне экрана, как этого избежать?

2) Нашёл css простых геометрических фигур, это как раз то что надо мне, но как сделать границу по периметру треугольника не как не могу придумать. Думал уже сделать ещё один треугольник чуть большего размера и засадить его под первый div, но тут опять упёрся в позиционирование div(он находится между двумя div).

CSS

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

@Андрюшатина · 13.01.2016, 13:37

ответ на 1)
На каком разрешении ( в px) у тебя улетает блок?
Как правило такие вещи корректируются с помощьюмедиа запросов.
Просто на нужном разрешении пишешь медиа запрос с нужными параметрами, меняешь размер и т.д. и всё должно получится.

Spirt Tesla · 13.01.2016, 17:50

1-Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Решение на флексбоксе

HTML5

<div class="container">
  <div class="item1">Flex item 1</div>
  <div class="item2">Flex item 2</div>
</div>

CSS

1
2
3

.container{display:flex;width:100%;}
.item1{min-width:232px;height:181px;border:1px solid black;}
.item2{min-width:832px;height:681px;margin-left:5px;border:1px solid black;}

@chomovva · 13.01.2016, 18:00

Сообщение от pokk

2) Нашёл css простых геометрических фигур, это как раз то что надо мне, но как сделать границу по периметру треугольника не как не могу придумать. Думал уже сделать ещё один треугольник чуть большего размера и засадить его под первый div, но тут опять упёрся в позиционирование div(он находится между двумя div).

границу можно только с помощью другого дива или псевдоэлемента. сбросьте код html, а то немного не пойму по поводу "между двумя div", может получится что посоветовать.

@pokk · 14.01.2016, 07:46 **[ТС]**

chomovva, В прицепе мне надо перерисовать картинку на CCS.
Вот код чего наделал:

Кликните здесь для просмотра всего текста

HTML5

<html>
<head>
    <title>ОКБ АЛЬФА</title>
    <meta http-equiv="Content-Type" Content="text/html; Charset=UTF-8"/>
 
    
    <!-- <link rel="stylesheet" href="1/css/font-awesome.css"> -->
    
</head>
<style>
#ContentImage{
    float:left;
    height: 100px;
    width: 200px;
    clear:left;
 
}
#triangle-right {
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
/*  border-width:2px;
    border-color:black;  */
    
}
#OfsetLine {
    position: relative;
    width: 200px;
    height: 3px;    
    top: 50%;
}
#Iine {
    width: 200px;
    height: 2px;
    background: black;
}
 
#center_tabl_show_TEST{
    float:left;
    width: 100px;
    height: 100px;
}
</style>
<!-- ============================================================================================-->
<!-- ============================================================================================-->
<!-- ============================================================================================-->
<body style="font-size: 80%;">
<!-- ---------------------------------------------------------------------------------------------->
    <div>
    <div id="ContentImage">
        <div id="OfsetLine">
            <div id="Iine" style="OfsetLine"></div>
        </div>
    </div>
    <div id="center_tabl_show_TEST">
        <div id="triangle-right"></div>
    </div>  
    <div id="center_tabl_show_TEST">
        <div id="OfsetLine">
            <div id="Iine" style="OfsetLine"></div>
        </div>
    </div>
</div>
        
 
 
</body>
</html>

HTML5

@chomovva · 14.01.2016, 14:25

pokk, исходя из рисунка, я бы так сделал:
https://jsfiddle.net/chomovva/... sSMQNwp3r6
контенту можно задать минимальную ширину и обтекание.

Кликните здесь для просмотра всего текста

HTML5

<html>
<head>
    <title>ОКБ АЛЬФА</title>
    <meta http-equiv="Content-Type" Content="text/html; Charset=UTF-8"/>
 
    
    <!-- <link rel="stylesheet" href="1/css/font-awesome.css"> -->
    
</head>
<style>
    
.container {
    margin: 100px;
}
 
.triangle {
    position: relative;
    border-top: 2px solid #000000;
}
 
.triangle:after,
.triangle:before {
    content: '';
    position: absolute;
    left: 50%;
}
 
.triangle:before {
    border-top: 50px solid transparent;
    border-left: 100px solid #000000;
    border-bottom: 50px solid transparent;
    margin-left: -50px;
    margin-top: -51px;
}
 
.triangle:after {
    border-top: 47px solid transparent;
    border-left: 95px solid #ffffff;
    border-bottom: 47px solid transparent;
    margin-left: -48px;
    margin-top: -48px;
}
    
</style>
<body style="font-size: 80%;">
 
    <div class="container">
        <div class="triangle"></div>
    </div>
 
</body>
</html>

@pokk · 15.01.2016, 04:06 **[ТС]**

О благодарю все за ответы, то что надо.
И разметку страницы решил переделать на флексбоксе.

Spirt Tesla · 15.01.2016, 04:13

Сообщение от pokk

О благодарю все за ответы, то что надо.
И разметку страницы решил переделать на флексбоксе.

Кнопка спасибо находится справа снизу под сообщениями которые помогли с решением)

@Андрюшатина 80 / 59 / 47 Регистрация: 27.11.2014 Сообщений: 359
	13.01.2016, 13:37	2
	ответ на 1) На каком разрешении ( в px) у тебя улетает блок? Как правило такие вещи корректируются с помощьюмедиа запросов. Просто на нужном разрешении пишешь медиа запрос с нужными параметрами, меняешь размер и т.д. и всё должно получится. 1

@chomovva 61 / 59 / 23 Регистрация: 29.07.2014 Сообщений: 286
	13.01.2016, 18:00	4
	Сообщение от pokk 2) Нашёл css простых геометрических фигур, это как раз то что надо мне, но как сделать границу по периметру треугольника не как не могу придумать. Думал уже сделать ещё один треугольник чуть большего размера и засадить его под первый div, но тут опять упёрся в позиционирование div(он находится между двумя div). границу можно только с помощью другого дива или псевдоэлемента. сбросьте код html, а то немного не пойму по поводу "между двумя div", может получится что посоветовать. 0

@pokk 0 / 0 / 0 Регистрация: 05.05.2014 Сообщений: 35
	15.01.2016, 04:06 [ТС]	7
	О благодарю все за ответы, то что надо. И разметку страницы решил переделать на флексбоксе. 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	15.01.2016, 04:13	8
	Сообщение от pokk О благодарю все за ответы, то что надо. И разметку страницы решил переделать на флексбоксе. Кнопка спасибо находится справа снизу под сообщениями которые помогли с решением) 0