force div圍繞另一個div

目前我有一個包含2個div的父div，兩個div都有自己的邊框。我試圖做的是在左上角有1個div，另一個div在右側和底部包圍它們，並在它們之間留有餘量。就像下面的圖片：force div圍繞另一個div

enter image description here

這甚至可能，使用CSS3和HTML5？

編輯：這是div的佈局。

<div id="main"> 
    <div id="leftdiv"> 
     Here is some text and an image displayed 
    </div> 
    <div id="rightdiv"> 
     <div class="profile"><h4>Some text</h4><img src="...."></div> 
     <div class="profile"><h4>Some text</h4><img src="...."></div> 
     <div class="profile"><h4>Some text</h4><img src="...."></div> 
     <div class="profile"><h4>Some text</h4><img src="...."></div> 
     <div class="profile"><h4>Some text</h4><img src="...."></div> 
     .............. 
    </div> 
</div>

來源

2013-05-13 udigital

分享您的標記，請 – 2013-05-13 09:24:30

請爲這個創造小提琴。 – 2013-05-13 09:30:02

不，這不能用純粹的CSS來完成，除非你引入了很多過時的元素。你可以用背景圖像來僞造。 – 2013-05-13 09:42:53

您可以嘗試用左上方容器的僞元素來僞造此效果。

.first { 
    position: relative; 
    float: left; 
    height: 30px; 
    width: 30px; 
    border: 1px solid black; 
    margin: 0 5px 5px 0; 
} 

.first:after { 
    content: ''; 
    position: absolute; 
    top: -1px; 
    right: -5px; 
    height: 35px; 
    width: 3px; 
    background-color: #fff; 
    border-right: 1px solid black; 
} 

.first:before { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    left: -1px; 
    height: 3px; 
    width: 35px; 
    background-color: #fff; 
    border-bottom: 1px solid black; 
} 

.second { 
    height: 80px; 
    width: 100px; 
    border: 1px solid black; 
}

看到這個小提琴： http://jsfiddle.net/fqsDp/2/

來源

2013-05-13 09:44:47

雖然勇敢的嘗試，'樣品'圖像包含很多圓角，你不能在那裏，或指向正確的方式，用這種方法。努力+1。 – 2013-05-13 09:46:19

不過，這是一個非常棒的努力！ – Strawberry 2013-05-13 09:49:48

我在jsfiddle.com如下：

#main { 
    float: left; 
    width: 400px; 
} 

#leftdiv { 
    float: left; 
    margin: 0 0.5em 0.5em 0; 
    background: green; 
    color: black; 
    width: 150px; 
    height: 150px; 
    background: rgb(255,255,255); 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0); 
    border: 1px solid #E2E2E2; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
#rightdiv { 
    background: rgb(255,255,255); 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0); 
    border: 1px solid #E2E2E2; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

http://jsfiddle.net/5unJw/

來源

2013-05-13 09:53:28 udigital

force div圍繞另一個div

回答

相關問題