সমান দূরত্বযুক্ত ডিআইভি সহ তরল প্রস্থ


329

আমার কাছে তরল প্রস্থের কনটেইনার ডিআইভি রয়েছে।

এর মধ্যে আমার কাছে সমস্ত 300px x 250px 4 টি ডিআইভি ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

আমি যেটি ঘটতে চাই তা হ'ল বক্স 1 হ'ল বামে ভাসতে হবে, বাক্স 4 টি ডান দিকে ভাসতে হবে এবং 2 এবং 3 বাক্সটি তাদের মধ্যে সমানভাবে ফাঁক করে রাখতে হবে। আমি চাই যে ব্যবধানটি তরল হওয়াও ব্রাউজারটি ছোট করার সাথে সাথে স্থানটি আরও ছোট হয়ে যায়।

এখানে চিত্র বর্ণনা লিখুন


2
কেন display:inline-block;ভাসা বদলে না ?
আইইপ

1
কারণ আই 6 IE / আই 7 কেবলমাত্র উপাদানগুলিতে সমর্থন inline-blockকরেinline
লি দাম

ঠিক আছে, আপনি কোন ব্রাউজারগুলির জন্য যাচ্ছেন তা নিশ্চিত ছিল না।
আইইপ

1
আমি যে নিকটতম সমাধানটির কথা ভাবতে পারি তা হ'ল প্রতিটি বাচ্চা .box ডিভকে অন্য ডিভের 25% প্রস্থে মোড়ানো। তারপরে, সন্তানের .box ডিভটিকে মোড়কে কেন্দ্র করুন। .Box ডিভগুলি সমানভাবে ব্যবধান করা হবে তবে বাম এবং ডান ডিভটি প্রান্তের সাথে ডান হবে না।
পল শ্যাম

5
আমি @ পল শামের ধারণাটিকে একটি জেএসফিডেলে পরিণত করেছি
স্পার্কি

উত্তর:


440

দেখুন: http://jsfiddle.net/thirtydot/EDp8R/

  • এটি আই 6+ এবং সমস্ত আধুনিক ব্রাউজারে কাজ করে!
  • এটিকে কাজ করা সহজ করার জন্য আমি আপনার অনুরোধকৃত মাত্রাগুলিকে অর্ধেক করে রেখেছি।
  • text-align: justifyএকসাথে .stretchঅবস্থান যা পরিচালনা করছে।
  • display:inline-block; *display:inline; zoom:1inline-blockআই 6/7 এর জন্য সংশোধন করুন , এখানে দেখুন
  • font-size: 0; line-height: 0 আই 6 এ একটি ছোটখাটো সমস্যা সমাধান করে।

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}
<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

অতিরিক্ত span( .stretch) এর সাথে প্রতিস্থাপন করা যেতে পারে :after

এটি এখনও উপরের সমাধানটির মতো একই ব্রাউজারগুলিতে কাজ করে। :afterআই 6/7 এ কাজ করে না, তবে তারা distribute-all-linesযেভাবেই ব্যবহার করছে , তাই এটি কোনও বিষয় নয়।

দেখুন: http://jsfiddle.net/thirtydot/EDp8R/3/

এখানে একটি ছোটখাটো ক্ষতি আছে :after: সাফারিতে শেষ সারিটি পুরোপুরি কাজ করতে আপনাকে এইচটিএমএল-এ হোয়াইটস্পেসের সাথে যত্নবান হতে হবে।

বিশেষত, এটি কাজ করে না:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

এবং এটি করে:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

আপনি divএটি boxNপরিবর্তন করে প্রত্যেকের ক্লাস যুক্ত না করে যেকোনও স্বেচ্ছাসেবী সংখ্যার জন্য ব্যবহার করতে পারেন

.box1, .box2, .box3, .box4 { ...

প্রতি

#container > div { ...

এটি ডিভের প্রথম সন্তান #containerএবং এটির নীচে অন্য কোনও ডিভ নির্বাচন করে। পটভূমির রঙগুলিকে সাধারণকরণ করতে, আপনি CSS3 নবম-অর্ডার নির্বাচনকারী ব্যবহার করতে পারেন , যদিও এটি কেবল আই 9 + + এবং অন্যান্য আধুনিক ব্রাউজারগুলিতে সমর্থিত:

.box1, .box3 { ...

হয়ে:

#container > div:nth-child(odd) { ...

একটি jsfiddle উদাহরণ জন্য এখানে দেখুন


123
এইচটিএমএল এর প্রতিটি বাক্সের মধ্যে আপনার ফাঁকা স্থান থাকা উচিত তা জানতে আমি 3 ঘন্টা নিয়েছিলাম। "ন্যায়সঙ্গত হওয়া" উপাদানগুলির মধ্যে ফাঁক বাড়ায় এবং যদি আপনার সামগ্রী হয় তবে <div/><div/><div/>এটি কার্যকর হয় না। আপনার দরকার হবে <div/> <div/> <div/>
ভিনিমাস

5
কেবল এটি নোট করতে চেয়েছিলেন :) কারণ আপনি উত্পন্ন সামগ্রী (যা সাধারণ ক্ষেত্রে) দিয়ে কাজ করেন তা লক্ষ্য করা শক্ত। আমি এই justifyধরনের ক্ষেত্রে ব্যবহার করার জন্য ভাবছিলাম , তবে একটি কাজের সমাধান দেওয়ার জন্য আপনাকে ধন্যবাদ। আমাকে প্রচুর পরীক্ষা সংরক্ষণ করেছে (3 ডি ডিবাগিং সত্ত্বেও: ডি)। এছাড়াও আমি একটি নোট যোগ করতে পারি যে আপনি যদি আপনার শেষ সারিটি প্রান্তিককরণ করতে চান তবে আপনাকে কিছু অতিরিক্ত অদৃশ্য বাক্স যুক্ত করতে হবে (সারিটি সম্পূর্ণ করতে)
ভিনিমাস

4
@venimus: আমি করেছি কৌশল ব্যবহার করে অন্য উত্তর লিখেছে stackoverflow.com/questions/10548417/... । অদৃশ্য বাক্সগুলি যুক্ত করার কারণে অতিরিক্ত উচ্চতা থেকে মুক্তি পেতে আপনি কী করেছিলেন?
ত্রিশডট

11
। স্ট্রেচ প্রয়োজনীয় কেন কেউ ব্যাখ্যা করতে পারে ?
পি এ পি

6
@ হার্টলেসান: .stretch/ :afterপ্রয়োজনীয় কারণ কারণ (সাধারণত) যুক্তিসঙ্গত পাঠ্য সহ, শেষ লাইনটি ন্যায়সঙ্গত নয় । এখানে আমরা শেষ পংক্তিকে ন্যায়সঙ্গত করতে চাই, অতএব এটির প্রয়োজন :after। আপনার দ্বিতীয় প্রশ্নের হিসাবে, আমি এটি পূর্ববর্তী একটি উত্তর আগে সন্ধান করেছি । সেই উত্তরে জাভাস্ক্রিপ্টের দরকার ছিল। আপনার যদি পুরানো ব্রাউজারগুলি (আইই 8) সমর্থন করতে হয় তবে আমি বিশ্বাস করি আপনার জাভাস্ক্রিপ্ট দরকার need
ত্রিশডট

140

এটি করার এখন সবচেয়ে সহজ উপায় হ'ল ফ্লেক্সবক্সের সাহায্যে:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

সিএসএস তখন সহজভাবে:

#container {
    display: flex;
    justify-content: space-between;
}

ডেমো: http://jsfiddle.net/QPrk3/

তবে এটি বর্তমানে তুলনামূলকভাবে সাম্প্রতিক ব্রাউজারগুলির দ্বারা সমর্থিত ( http://caniuse.com/flexbox )। এছাড়াও, ফ্লেক্সবক্স লেআউটটির জন্য ধারণাটি কয়েকবার পরিবর্তিত হয়েছে, সুতরাং এটি আরও পুরানো বাক্য গঠন সহ আরও ব্রাউজারগুলি কভার করা সম্ভব:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/


1
এর জন্য আপনাকে ধন্যবাদ, এত সহজ, আমি এটি একটি পৃষ্ঠার নীচে স্থিত একটি পাদদেশে চারটি এমনকি ফাঁকানো তালিকার জন্য প্রয়োগ করেছি applied এফএফ 28.0, ক্রোম 34.0.1847.116 মি এবং আই 11 এ একটি ট্রিট কাজ করেছেন।
ব্যবহারকারী 1063287

1
ফ্লেক্সবক্স ওয়েব জুড়ে সর্বাধিক সমর্থিত সরঞ্জাম নয় এবং এটি মার্জিন এবং প্যাডিংয়ের ক্লাসিক পদ্ধতিকে পরাস্ত করে না।
দ্য

প্রত্যেকের জন্য সংজ্ঞায়িত সংস্থার সাথে একাধিক ডিভকে ন্যায়সঙ্গত করার জন্য খুঁজছেন: ডিসপ্লে সহ ফ্লেক্স-র‌্যাপ ব্যবহার করুন: ফ্লেক্স বিকল্পটি। এটি গতিশীল প্রস্থের সাথে ডিভগুলি মোড়ানো করবে।
কামিল বুদজিউস্কি

20

যদি CSS3 একটি বিকল্প হয় তবে এটি CSS calc()ফাংশনটি ব্যবহার করে করা যেতে পারে ।

কেস 1: একটি একক লাইনে বক্সগুলি ন্যায়সঙ্গত করা ( FIDDLE )

মার্কআপ সহজ - কিছু ধারক উপাদানের সাথে একগুচ্ছ ডিভ্স।

সিএসএস এর মতো দেখাচ্ছে:

div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

যেখানে -9px একটি IE9 + ক্যালক / রাউন্ডিং বাগ ঠিক করতে - এখানে দেখুন

কেস 2: একাধিক লাইনে বক্সগুলি ন্যায়সঙ্গত করা ( FIDDLE )

এখানে, calc()ফাংশন ছাড়াও , media queriesপ্রয়োজনীয়।

মূল ধারণাটি হ'ল প্রতিটি # কলামের রাজ্যের জন্য একটি মিডিয়া ক্যোয়ারী সেটআপ করা, যেখানে আমি তখন প্রতিটি উপাদানের মার্জিন-রাইট কাজ করার জন্য ক্যালক () ব্যবহার করি (শেষ কলামে থাকাগুলি বাদে)।

এটি অনেক কাজের মতো শোনাচ্ছে তবে আপনি যদি কম বা SASS ব্যবহার করেন তবে এটি বেশ সহজেই করা যায়

(এটি এখনও নিয়মিত সিএসএস দিয়ে করা যায়, তবে তারপরে আপনাকে সমস্ত গণনা ম্যানুয়ালি করতে হবে এবং তারপরে আপনি যদি নিজের বাক্সের প্রস্থ পরিবর্তন করেন - আপনাকে আবার সমস্ত কিছু করতে হবে)

নীচে কম ব্যবহার করে একটি উদাহরণ দেওয়া হল: (আপনি এই কোডটি এটির সাথে খেলতে এখানে অনুলিপি / পেস্ট করতে পারেন , [এটিও আমি উল্লিখিত ফিডল তৈরি করতে ব্যবহৃত কোডটি]]

@min-margin: 15px;
@div-width: 150px;

@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);

@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);


*{margin:0;padding:0;}

.container
{
    overflow: auto;
    display: block;
    min-width: @3divs-width;
}
.container > div
{
    margin-bottom: 20px;
    width: @div-width;
    height: 100px;
    background: blue;
    float:left;
    color: #fff;
    text-align: center;
}

@media (max-width: @3divs-width) {
    .container > div {  
        margin-right: @min-margin;
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @3divs-width) and (max-width: @4divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @4divs-width) and (max-width: @5divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
    }
    .container > div:nth-child(4n) {  
        margin-right: 0;
    }
}

@media (min-width: @5divs-width) and (max-width: @6divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
    }
    .container > div:nth-child(5n) {  
        margin-right: 0;
    }
}

@media (min-width: @6divs-width){
    .container > div {  
        margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
    }
    .container > div:nth-child(6n) {  
        margin-right: 0;
    }
}

সুতরাং মূলত আপনাকে প্রথমে বাক্স-প্রস্থ এবং ন্যূনতম মার্জিনটি ঠিক করতে হবে যা আপনি বাক্সগুলির মধ্যে চান।

এটির সাথে, আপনি প্রতিটি রাজ্যের জন্য আপনার কতটা জায়গা প্রয়োজন তা নিয়ে কাজ করতে পারেন।

তারপরে, ডান মার্জিন গণনা করতে ক্যালক () ব্যবহার করুন এবং চতুর্থ কলামের বাক্সগুলি থেকে ডান মার্জিনটি সরাতে নবম সন্তানের ব্যবহার করুন।

সুবিধা গৃহীত উত্তর যা ব্যবহারের উপর এই উত্তরtext-align:justify 2 বক্স চূড়ান্ত সারিতে অবশিষ্ট থাকে তাহলে - আমি: 'সমর্থনযোগ্য' চূড়ান্ত সারি পাবেন না উপর বক্স যেমন - যে আপনি বাক্সে চেয়ে বেশি এক সারি আছে হয় প্রথম বাক্সটি বাম দিকে এবং পরেরটিটি ডানে থাকবে না - বরং বাক্সগুলি একে অপরকে যথাযথ অনুসরণ করে।

সংক্রান্ত ব্রাউজার সমর্থনের এই উপর IE9 + ফায়ারফক্স, ক্রোম, Safari6.0 কাজ করবে - (দেখুন এখানে আরো বিস্তারিত জানার জন্য) তবে আমি লক্ষ্য করেছি যে IE9 তারিখে + সেখানে মিডিয়া কুয়েরি দেশের মধ্যে সামান্য ত্রুটি একটি বিট আছে। [যদি কেউ এটির সমাধান করতে জানে তবে আমি সত্যিই জানতে চাই :)] <- এখানে স্থিত


13

অন্যান্য পোস্টে ফ্লেক্সবক্স উল্লেখ করেছে , তবে আইটেমগুলির একাধিক সারির প্রয়োজন হলে ফ্লেক্সবক্সের space-betweenসম্পত্তি ব্যর্থ হয় (পোস্টের শেষে দেখুন)

আজ অবধি, এর একমাত্র পরিষ্কার সমাধান হল এর সাথে

সিএসএস গ্রিড লেআউট মডিউল ( কোডপেন ডেমো )

মূলত প্রাসঙ্গিক কোডগুলি এটিকে ফুটিয়ে তোলে:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) ধারক উপাদান একটি গ্রিড ধারক করুন

2) প্রয়োজনীয় হিসাবে কলামের একটি 'অটো' পরিমাণের সাথে গ্রিডটি সেট করুন। প্রতিক্রিয়াশীল লেআউটগুলির জন্য এটি করা হয়। প্রতিটি কলামের প্রস্থ হবে 120px। ( auto-fit(প্রস্তাবিত হিসাবে auto-fill) এর ব্যবহারটি নোট করুন যা (1-সারি বিন্যাসের জন্য) খালি ট্র্যাকগুলি 0 তে পতিত হয়েছে - আইটেমগুলিকে অবশিষ্ট স্থানটি বাড়ানোর সুযোগ দেয় (( আমি কী বলছি তা দেখতে এই ডেমোটি পরীক্ষা করে দেখুন check ))।

3) গ্রিড সারি এবং কলামগুলির জন্য ফাঁক / নালী নির্ধারণ করুন - যেহেতু একটি 'স্পেস-মধ্যবর্তী' বিন্যাস চান - ফাঁকটি আসলে ন্যূনতম ফাঁক হবে কারণ এটি প্রয়োজনীয় হিসাবে বৃদ্ধি পাবে।

4) এবং 5) - ফ্লেক্সবক্সের অনুরূপ।

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

কোডপেন ডেমো (প্রভাবটি দেখতে পুনরায় আকার দিন)


ব্রাউজার সমর্থন - ক্যানিউজ

বর্তমানে ক্রোম (ঝলক), ফায়ারফক্স, সাফারি এবং এজ দ্বারা সমর্থিত! আইই এর আংশিক সমর্থন সহ ( রাহেল অ্যান্ড্রু এর পোস্টটি দেখুন )


বিশেষ দ্রষ্টব্য:

ফ্লেক্সবক্সের space-betweenসম্পত্তি এক সারি আইটেমের জন্য দুর্দান্ত কাজ করে, তবে যখন এটি ফ্লেক্স পাত্রে প্রয়োগ করা হয় যা তার আইটেমগুলি আবৃত করে - (সাথে flex-wrap: wrap) - ব্যর্থ হয়, কারণ আইটেমগুলির শেষ সারিটির প্রান্তিককরণের উপর আপনার কোনও নিয়ন্ত্রণ নেই; শেষ সারিটি সর্বদা ন্যায়সঙ্গত হবে (সাধারণত আপনি যা চান তা নয়)

প্রদর্শন করার জন্যে:

কোডেপেন (আমি কী বলছি তা দেখার জন্য পুনরায় আকার দিন)


সিএসএস গ্রিডে আরও পড়া:


1
খুব আন্ডাররেটেড উত্তর। আমি যা করতে চাই তা অর্জনের এটি ছিল সহজতম এবং কার্যকর উপায়। ধন্যবাদ.
বার্নাব্য মের্সার

1
এটি সিএসএসের সর্বনিম্ন পরিমাণে (এবং কোনও জেএস! )ই ছিল না যা আকার এবং জায়গার জন্য কিছু টুইট করে আমি ঠিক যে আচরণটি খুঁজছিলাম produced
EKW

1
আমি এটির জন্য কিছুক্ষণ খুঁজছিলাম এবং অবশেষে এটি খুঁজে পেয়েছি! ধন্যবাদ @ ড্যানিয়েলড
নরিবয়

2

এটি আমার জন্য বৈচিত্র্যময় আকারে 5 টি চিত্র নিয়ে কাজ করেছিল।

  1. একটি ধারক ডিভ তৈরি করুন
  2. চিত্রগুলির জন্য একটি আনর্ডারড তালিকা
  3. সিএসএসে নিরক্ষিত অবশ্যই উল্লম্বভাবে এবং বুলেট ছাড়াই প্রদর্শিত হবে
  4. ধারক ডিভির সামগ্রীর ন্যায়সঙ্গত করুন

এটি ন্যায়সঙ্গত-সামগ্রীর কারণে কাজ করে: স্থান-মধ্যবর্তী, এবং এটি একটি তালিকাতে, অনুভূমিকভাবে প্রদর্শিত displayed

সিএসএসে

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

এইচটিএমএলে

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

যদিও এই কোডটি কার্যকরভাবে কাজ করতে পারে, একটি ভাল উত্তরের মধ্যে এটি কীভাবে কাজ করে এবং কেন এটি একটি ভাল সমাধান তার ব্যাখ্যা অন্তর্ভুক্ত থাকবে।
ব্ল্যাকউড

এটি লক্ষণীয় যে ফ্লেক্সবক্স নয় (বা কেবলমাত্র আংশিক) নয় আইই ক্যানিউজ.com
ডেভিড

এটা কি প্রতিক্রিয়াশীল?
স্ট্যাকডেভ

1

আপনি jQueryসরাসরি পিতামাতাকে লক্ষ্য করতে পারে।

আপনি যদি এই সংখ্যাটি সঠিকভাবে জানেন না তবে আপনি কতটা শিশুকে সুনির্দিষ্টভাবে যুক্ত করতে পারেন বা আপনি যদি তাদের সংখ্যাটি অঙ্কিয়ে না দেখতে পারেন তবে এটি কার্যকর।

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

এই দেওয়া হবে parentহত্তয়া অনুভূমিকভাবে হিসাবে childrenযোগ Beng করছে।

দ্রষ্টব্য: এটি ধরে নিয়েছে যে '.children'একটি widthএবং Heightসেট আছে

আশা করি এইটি কাজ করবে.


1

যদি আপনি "সারি" প্রতি উপাদানগুলির সংখ্যা এবং ধারকটির প্রস্থ জানেন তবে আপনি একটি নির্বাচককে উপাদানগুলিতে মার্জিন যুক্ত করতে ব্যবহার করতে পারেন যা আপনার ন্যায্য বর্ণের কারণ হতে পারে।

আমি ন্যায্য চাই তাই তিনটি ডিভের সারি ছিল:

.tile:nth-child(3n+2) { margin: 0 10px }

এটি প্রতিটি সারিতে কেন্দ্র ডিভকে একটি মার্জিন রাখতে দেয় যা ধারকটির বাইরের প্রান্তগুলিতে 1 ম এবং 3 য় বিভাজনকে বাধ্য করে

সীমানা ব্যাকগ্রাউন্ডের রং ইত্যাদির মতো অন্যান্য জিনিসের জন্যও দুর্দান্ত

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.