কোনও বাক্সে কোনও আকার / আংশিক সীমানা ঘোষণার উপায়?


105

CSS এর কোনও বাক্সে কোনও আকার / আংশিক সীমানা ঘোষণার কোনও উপায়? উদাহরণস্বরূপ 350pxযে বাক্সটি কেবল তার প্রথম অংশে একটি সীমানা নীচে দেখায় 60px। আমি মনে করি এটি খুব কার্যকর হতে পারে।

উদাহরণ:

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

উত্তর:


155

আসলে তা না. তবে এমনভাবে প্রভাবটি অর্জন করা খুব সহজ যা কোনওভাবে নিখুঁতভাবে হ্রাস পায় এবং অতিরিক্ত অতিরিক্ত মার্কআপের প্রয়োজন নেই:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>


4
+1 না করে সঠিক উত্তর চিহ্নিত করার মতো কিছুই নেই। তবে আমি আপনাকে +1 করেছি! এটি আমার সমস্যার সমাধান ছিল। ধন্যবাদ! সম্পাদনা আমি অনুমান করি যে আপনি অন্য কাউকে +1 এবং +1 করতে পারতেন। আচ্ছা ভালো. আমি আপনার উত্তরটির প্রশংসা করি এবং
এগুলিই

7
আপনি কীভাবে এটি দ্বিতীয় কেনার মতো কেন্দ্রে থাকতে পারেন?
ক্যামেরন মার্টিন

আমার যুক্ত করা উচিত, যখন প্যারেন্ট উপাদানটি তরল প্রস্থের ইনলাইন-ব্লক উপাদান। স্পষ্টতই যখন এটির প্রস্থ স্থির করা সহজ হয়।
ক্যামেরন মার্টিন

4
কিছুই নয়, আমি যেভাবে চেয়েছিলাম তার প্রভাব পেয়েছি - dabblet.com/gist/e5a78f2d4bf50b6be4d3 । এটি লজ্জাজনক ::outsideএবং ::insideসিউডো-উপাদানগুলি এখনও উপলভ্য নয়, আমি কেবল স্টাইলিংয়ের জন্য মার্কআপ রাখা ঘৃণা করি, তবে অন্য কোনও উপায় আছে বলে আমি মনে করি না।
ক্যামেরন মার্টিন

এইটা কাজ করে! প্রতিক্রিয়া সঙ্গে এটি ব্যবহার করার জন্য, আপনাকে ব্যবহার করতে পারবেন না content:afterইনলাইন শৈলী অথবা জনসংহতি যেমন, কিন্তু এটা স্টাইল উপাদান ব্যবহার করে কাজ করে জরিমানা।
রাফেল পিনেল

26

আমি জানি, এটি ইতিমধ্যে সমাধান হয়েছে এবং পিক্সেলগুলির জন্য অনুরোধ করা হয়েছিল। তবে আমি কেবল কিছু ভাগ করে নিতে চাই ...

আংশিকভাবে আন্ডারলাইন করা টেক্সট উপাদানগুলি ব্যবহার করে display:tableবা সহজেই অর্জন করা যায়display:inline-block

(আমি কেবল ব্যবহার করি না display:inline-blockকারণ, হ্যাঁ আপনি জানেন, বিশ্রী- 4pxগ্যাপ)।

পাঠ্য উপাদানসমূহ

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>

কেন্দ্রীকরণ , এর display:tableসাথে উপাদানটিকে কেন্দ্র করে রাখা অসম্ভব করে তোলে text-align:center
এর সাথে কাজ করা যাক margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>

আচ্ছা , এটি দুর্দান্ত, তবে এটি আংশিক নয় । পুস্তকেশী
যেমন ইতিমধ্যে চালু হয়েছে, সিউডো-উপাদানগুলি সোনার মূল্য।

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>

অফসেট , আন্ডারলাইনটি এখনই সারিবদ্ধ করা হয়েছে। এটি কেন্দ্র করতে, কেবলমাত্র সিউডো-এলিমেন্টটি এর width( 50% / 2 = 25%) এর অর্ধেকটি ডানদিকে চাপুন ।

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>

... যেমন ডেভিডম্যাটাস মন্তব্য করেছেন, হাত margin:autoদিয়ে marginঅফসেট গণনা করার চেয়ে কখনও কখনও ব্যবহার করা আরও ব্যবহারিক হয়।

সুতরাং, আমরা widthএই সমন্বয়গুলির মধ্যে একটি ব্যবহার করে বাম, ডান বা কেন্দ্রে (বর্তমানটি না জেনে ) আন্ডারলাইনটি সারিবদ্ধ করতে পারি :

  • বাম : margin-right: auto (বা কেবল এটি ছেড়ে দিন)
  • মধ্যম :margin: auto
  • ডান :margin-left: auto

পুরো উদাহরণ

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>

ব্লক-স্তর উপাদানসমূহ

এটি সহজেই গ্রহণ করা যেতে পারে, যাতে আমরা ব্লক-স্তরের উপাদান ব্যবহার করতে পারি। কৌশলটি হ'ল ছদ্ম-উপাদানগুলির উচ্চতাটিকে তার আসল উপাদানের (সহজভাবে height:100%) হিসাবে একই উচ্চতায় সেট করা :

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}
<div></div>


4
দুর্দান্ত উত্তর। জন্য :afterআরো একটি মত margin: 0 autoপদ্ধতির পরিবর্তে margin-left: 25%কারণ এটি কোনো প্রস্থ আপনি গণিতশাস্ত্র করতে প্রয়োজন ছাড়াই ঘোষণা সঙ্গে কাজ করবে।
ডেভিডম্যাটাস

4
@ ডেভিডম্যাটাস ভালো পয়েন্ট! কীভাবে হাতে হাতে এটি স্থাপন করা যায় তা স্পষ্ট করার জন্য আমি ম্যাথি-ওয়ে ব্যবহার করেছি । এই উদাহরণ সহ যে কেউ বুঝতে পারে যে কীভাবে এটি বাম / কেন্দ্র / ডানদিকে সারিবদ্ধ করা যায়। যাই হোক, আমি যোগ হবে auto- simplificator :)
yckart

17

এখানে আরও একটি সমাধান যা linear-gradientআপনি চান যে কোনও ধরণের লাইন সহজেই তৈরি করতে পারেন তার উপর নির্ভর করে । একাধিক পটভূমি ব্যবহার করে আপনার একাধিক লাইনও থাকতে পারে (উদাহরণস্বরূপ প্রতিটি দিকে):

উপরের মতটি অর্জনের জন্য এখানে আরও একটি বাক্য গঠন রয়েছে:

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>


4
বাহ ... আমি "উপরের দিকে তাকানো" বক্সটি দেখানোর কেবল উপরের বাম এবং উপরের ডান দিকের কোণটি খুঁজে পাওয়ার জন্য ঘন্টার পর ঘন্টা ফিড করছি। : পূর্বে এবং: পরে খুব সীমাবদ্ধ ছিল, এটি বস্তুর অবস্থানকে বিশৃঙ্খলা করেছিল। এটি একটি উজ্জ্বল সমাধান!
ওয়াউটার

: কেন এবং কিভাবে এই কাজ কিছু পটভূমির তথ্য webfx.com/blog/web-design/background-css-shorthand
Wouter

এটি কোণার সীমানাগুলি ক্লিপ করে যদি ব্যবহার করা হয়border-radius
বন্দর

2

কিছু সীমানা আঁকতে আমি গ্রিড ব্যবহার করেছি।

এখানে দেখুন ।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>

@ SverriM.Olsen যেহেতু ব্যক্তি কোডটি সম্পাদনা করেছে, মন্তব্যটি অপ্রচলিত
সাগর ভি

0

সিএসএস আংশিক সীমানা সমর্থন করে না। এটি অনুকরণ করার জন্য আপনাকে একটি সংলগ্ন উপাদান ব্যবহার করতে হবে।


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