form außerhalb Eigenschaft funktioniert nicht bei allen

-1

ich gerade begonnen haben, die shape-outside Eigenschaft in CSS versucht, aber ich bin nicht in der Lage, um es ganz gleich funktioniert, wie viele Dokumentation oder Blogs, die ich durchlaufen. Ich habe vielleicht einen dummen Fehler gemacht, aber ich bin mir nicht sicher. Kann jemand auf den Fehler hinweisen?form außerhalb Eigenschaft funktioniert nicht bei allen

#q { 
 
    background-color: #E6C9C9; 
 
    /*height: 100%; 
 
\t width: 100%;*/ 
 
    float: left !important; 
 
    -webkit-shape-outside: circle(50%); 
 
    shape-outside: circle(50%); 
 
}

<html> 
 

 
<head> 
 
    <title>Testing Split Div</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo 
 
     tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem. 
 
     Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te 
 
     est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur. 
 
     Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare 
 
     consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2017-05-26 Rehan

Sie nicht die outside-shape auf dem Elemente verwenden können selbst, aber Sie können :before oder :after Pseudoelement verwenden, um ein outside-shape das Element hinzuzufügen. Siehe folgende Lösung mit :before:

#q:before { 
 
    content:""; 
 
    display:block; 
 
    height:300px; 
 
    width:300px; 
 
    float: left; 
 
    -webkit-shape-outside: circle(50%); 
 
    shape-outside: circle(50%); 
 
} 
 
#q { 
 
    background-color: #E6C9C9; 
 
}

<html> 
 
    <head> 
 
    <title>Testing Split Div</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo 
 
     tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem. 
 
     Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te 
 
     est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur. 
 
     Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare 
 
     consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-05-26 08:11:56

hinein schauen und antworten Sie zurück. – Rehan

Danke, um es klar zu machen. Ich habe es falsch verstanden :) – Rehan

form außerhalb Eigenschaft funktioniert nicht bei allen

Antwort

Verwandte Themen