সীমানার দৈর্ঘ্য ডিভ প্রস্থের চেয়ে ছোট?

Question

আমি নিম্নলিখিত কোড আছে

div {
   width:200px;
   border-bottom:1px solid magenta;
   height:50px;   
}

ডেমো

ডিভ প্রস্থ 200px তাই সীমানা-নীচটিও 200px হয় তবে আমি ডিভি প্রস্থ পরিবর্তন না করে সীমান্ত-নীচে কেবল 100px চাইলে আমি কী করব?

Answer 1

আপনি ছদ্ম উপাদান ব্যবহার করতে পারেন। যেমন

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

<div>Item 1</div>
<div>Item 2</div>

উপস্থাপিত উদ্দেশ্যে অতিরিক্ত মার্কআপ ব্যবহার করার দরকার নেই। : পরে IE8 থেকে সমর্থিত।

সম্পাদনা:

আপনি একটি ডান-প্রান্তিক সীমান্ত প্রয়োজন, শুধু পরিবর্তন left: 0সঙ্গেright: 0

আপনার যদি কেন্দ্র-সারিবদ্ধ সীমানার প্রয়োজন হয় তবে কেবল সেট করুন left: 50px;

Comments

এটি আমার কৌশলও ছিল, তবে মনে রাখবেন যে এটি ডিভের বাম অর্ধেকের সীমানাটি দেবে। আপনি যদি এটি কেন্দ্রিক চান, দিন div:before left: 50px।

— চৌলেট

প্রশ্নটি সীমানাটি কোন অবস্থানে উপস্থিত হওয়া উচিত তা নির্দিষ্ট করে না তাই আমি অন্যান্য অবস্থান বিবেচনা করি নি

— Fabrizio Calderan

নীচের সীমানার প্রস্থ যদি 50% হয় এবং আপনি এটি কেন্দ্রিক করতে চান তবে শৈলীটি left: 25%25% + 50% + 25% হতে হবে

— 19

হ্যাঁ আমি এই উদাহরণে সচেতন এটি কাজ করে। তবে অন্যদের জন্য অনুরূপ কিছু করার জন্য এটি এটিকে প্রতিক্রিয়াশীল করার চেষ্টা করতে পারে, আপনার ক্ষেত্রে প্রয়োজন উত্তরটি যেমন প্রয়োজন ছিল তেমন আপনাকে% ব্যবহার করতে হবে।

— স্কিফ্ট করুন

ব্যবহারের margin: auto, right: 0, left: 0উপর :beforeলাইন কেন্দ্রে। আপভোট করুন যদি এটি আপনাকে সহায়তা করে।

— আলে_ইনফো

Answer 2

এটি করার আরেকটি উপায় (আধুনিক ব্রাউজারগুলিতে) একটি নেতিবাচক স্প্রেড বক্স-ছায়া সহ। আপডেট হওয়া এই পোড়াটি দেখুন: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

যদিও আমি মনে করি নিরাপদ এবং সর্বাধিক সামঞ্জস্যপূর্ণ উপায় হ'ল উপরের গৃহীত উত্তর। ভেবেছিলাম আমি অন্য কৌশল ভাগ করব।

Answer 3

আপনি একটি লিনিয়ার গ্রেডিয়েন্ট ব্যবহার করতে পারেন:

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
	background-position: bottom;
	background-size: 100% 25px;
	background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

<div></div>

Answer 4

আমি এই জাতীয় h3 ট্যাগ অধীনে লাইন যুক্ত

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}

Answer 5

ডিভের চেয়ে আলাদা আকারের সীমানা আপনার থাকতে পারে না।

সমাধানটি হ'ল কাঙ্ক্ষিত 1 পিক্সেল সীমানা এবং উচ্চতাতে কেবল 1 পিক্সেল সহ পরিষ্কার, কেন্দ্রিক বা নিখুঁত অবস্থানের অধীনে আরেকটি ডিভি যুক্ত করা হবে।

http://jsfiddle.net/WuZat/3/

আমি আসল সীমানাটি রেখে দিয়েছি যাতে আপনি প্রস্থটি দেখতে পাচ্ছেন এবং দুটি উদাহরণ থাকতে পারেন - একটিতে 100 প্রস্থ এবং অন্যটি 100 প্রস্থকে কেন্দ্র করে। আপনি যেটি ব্যবহার করতে চান না সেটি মুছুন।

Answer 6

পার্টিতে দেরীতে তবে যে কেউ 2 টি বর্ডার তৈরি করতে চায় (আমার ক্ষেত্রে নীচে এবং ডানদিকে) আপনি গ্রহণযোগ্য উত্তরে কৌশলটি ব্যবহার করতে পারেন এবং একটি যুক্ত করতে পারেন: দ্বিতীয় লাইনের জন্য স্যুইডো-এলিমেন্টের পরে ঠিক তার মতো বৈশিষ্ট্যগুলি পরিবর্তন করুন সুতরাং: http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

Answer 7

আমার কাছে ডিভ পাত্রে চিত্রগুলির মধ্যে কিছুটা নীচের সীমানা রয়েছে এবং সর্বোত্তম এক লাইন কোডটি ছিল - বর্ডার-বটম-স্টাইল: ইনসেট;

Answer 8

div{
    font-size: 25px;
    line-height: 27px;
    display:inline-block;
    width:200px;
    text-align:center;
}

div::after {
    background: #f1991b none repeat scroll 0 0;
    content: "";
    display: block;
    height: 3px;
    margin-top: 15px;
    width: 100px;
    margin:auto;
}

Answer 9

আমি আমার প্রকল্পে এরকম কিছু করেছি। আমি এখানে এটি ভাগ করতে চাই। আপনি শিশু হিসাবে অন্য একটি ডিভ যুক্ত করতে পারেন এবং এটি একটি ছোট প্রস্থের একটি সীমানা দিতে পারেন এবং এটিকে বামে, মাঝখানে বা ডানদিকে সিএসএসের সাহায্যে স্থাপন করতে পারেন

এইচটিএমএল কোড:

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

সিএসএস নীচে হিসাবে:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

Answer 10

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

এইচটিএমএল কোড:

<div> <span>content here </span></div>

সিএসএস নীচে হিসাবে:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid magenta;   
    } 

Answer 11

এইটা সাহায্য করবে:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

এটি 50% প্রস্থের সাথে একটি অনুভূমিক রেখা তৈরি করে, আপনি শৈলীটি সম্পাদনা করতে চাইলে আপনার ক্লাসটি তৈরি / পরিবর্তন করতে হবে।

Comments

এটি সহায়ক নয়। প্রয়োজনটি

— ডিভের

Answer 12

আমি কেবল এটির ব্যবহার করে এর বিপরীতটি সম্পাদন করেছি :afterএবং ::afterকারণ আমার নীচের সীমানাটি হুবহু করা দরকার1.3rem প্রশস্ত করতে হবে:

যখন আমি ব্যবহার করেছি :beforeএবং :afterএকই সাথে আমার উপাদানগুলি অতি বিকৃত হয়ে উঠেছে কারণ উপাদানগুলি অনুভূমিকভাবে একত্রিত হয় display: flex, flex-direction: rowএবংalign-items: center ।

আপনি বৃহত্তর বা সংকীর্ণ কিছু তৈরির জন্য, বা সম্ভবত কোনও গাণিতিক মাত্রার মোড তৈরি করতে এটি ব্যবহার করতে পারেন:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

দুঃখিত, এটি হ'ল SCSSকেবল সংখ্যাগুলি 10 দ্বারা গুণিত করুন এবং কিছু সাধারণ মান সহ ভেরিয়েবলগুলি পরিবর্তন করুন।