Блог

Главная - Вопросы по программированию - Проблема с переносом css div в другой div

Проблема с переносом css div в другой div

#html #css

#HTML #css

Вопрос:

Это код

 <!DOCTYPE html>
<html>
    <head>
        <style> 
            div.p > div
            {
                width: 200px;
                height: 30px;
                overflow: hidden;
                background-color: #FF0;
                transform: rotate(40deg);
                top: 45px;
                position: absolute;
                left: 45px;
            }
            div.p
            {
                width:200px;
                height:300px;
                background-color:red;
                border:2px solid black;
            }

        </style>
    </head>
    <body>
        <div class="p">
            <div></div>
        </div>
    </body>
</html>

пожалуйста, проверьте это изображение https://www.dropbox.com/s/3wrivi3760l3t7f/123.jpg

Я хочу удалить угол желтого div, чтобы он не выходил из родительского div, и я хочу использовать этот тип поля на своем сайте для функциональных продуктов. Я пробовал много вещей, но я не могу этого сделать!

Заранее спасибо.

Ответ №1:

Проверьте этот jsfiddle

 div.p
   {
      width:200px;
      height:300px;
      background-color:red;
      border:2px solid black;
      overflow: hidden;
      position:absolute;
   }

Комментарии:

1. Спасибо! Отлично! Большой палец!

Ответ №2:

Внутри:

 div.p

Вставить:

 overflow: hidden;

Кроме того, используйте это для div.p > div поддержки IE 9 🙂

 -ms-transform: rotate(40deg);

Ответ №3:

Я просто предполагаю.

Ваш внутренний элемент позиционируется с помощью display: absolute, поэтому он не входит в поток документов.

Я предполагаю, что для этого overflow:hidden не применяется.

Однако попробуйте следующее: Переместить overflow:hidden в .p не во внутренний div

Если это не сработает, я бы использовал вместо этого три divs, третий в качестве границы и использовал z-порядок.

Метки: