এলইএসএস সিএসএসে পিক্সেল থেকে পিক্সেল এর পরে প্রস্থের প্রস্থ গণনা করা হচ্ছে min

Question

আমি শতাংশ থেকে পিক্সেল পর্যন্ত কিছু উপাদানগুলির প্রস্থ গণনা করব তাই আমি কম এবং ক্যালক () ব্যবহার করে বিয়োগ -10px করব । এটা সম্ভব?

div {
    span {
        width:calc(100% - 10px);
    }
}

আমি CSS3 ব্যবহার করছি calc()যাতে এটি কাজ করে না:calc(100% - 10px)

উদাহরণ: যদি 100% = 500px তাই প্রস্থ = 490px (500-10);

আমি পরীক্ষার জন্য একটি ডেমো তৈরি করেছি: http://jsfiddle.net/4DujZ/55/

সুতরাং প্যাডিং বলবে: 5 টি (10px / 2) আমি যখন আকার পরিবর্তন করি তখন সমস্ত সময়।

আমি কি এটি কম করতে পারি ? আমি জানি jQuery এবং মার্জিন প্যাডিং বা অন্য মত সহজ সিএসএস না কিভাবে ... কিন্তু আমি কার্মিক করতে চেষ্টা করবে কম সঙ্গেcalc()

Comments

একটি সাধারণ নিয়ম হিসাবে, নির্বাচকদের স্টাইল করবেন না যার মতো শব্দার্থবিজ্ঞান নেই , পছন্দ করুন divবা span।

— পাভলো

যে কোনও CSS সম্পত্তিতে ক্যালক ব্যবহার করার জন্য আমি এখানে একটি ক্রস ব্রাউজারের মিশ্রণ লিখেছি: stackoverflow.com/a/24790931/916734

— প্যাট্রিক বার্কলে

Answer 1

calcসংকলনটি মূল্যায়ন হতে বাধা দিতে আপনি যুক্তিগুলি এড়াতে পারেন ।

আপনার উদাহরণ ব্যবহার করে আপনি সহজেই যুক্তিগুলি ঘিরে ফেলবেন:

calc(~'100% - 10px')

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

---

আমি দেখতে পেয়েছি যে আমি নিম্নলিখিত তিনটি পদ্ধতির একটিতে এটি ব্যবহার করি:

বেসিক এস্কেপিং

calcআর্গুমেন্টের অভ্যন্তরের সমস্ত কিছুই স্ট্রিং হিসাবে সংজ্ঞায়িত করা হয় এবং ক্লায়েন্টের দ্বারা মূল্যায়ন না করা পর্যন্ত এটি সম্পূর্ণ স্থির থাকে:

কম ইনপুট

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

সিএসএস আউটপুট

div > span {
  width: calc(100% - 10px);
}

চলকের ইন্টারপোলেশন

আপনি স্ট্রিংয়ে একটি কম ভেরিয়েবল সন্নিবেশ করতে পারেন:

কম ইনপুট

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

সিএসএস আউটপুট

div > span {
  width: calc(100% - 10px);
}

ইস্কেপড এবং সংকলিত মানগুলি মেশানো

আপনি শতাংশের মানটি থেকে বাঁচতে চাইতে পারেন, তবে এগিয়ে যান এবং সংকলনের উপর কিছু মূল্যায়ন করুন:

কম ইনপুট

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

সিএসএস আউটপুট

div > span {
  width: calc((100% - 10px) - 80px);
}

সূত্র: http://lesscss.org/funitions/#string-function-escape ।

Comments

তুমি শিলা, বন্ধু! এই উদাহরণ এবং ব্যাখ্যা জন্য আপনাকে ধন্যবাদ। আপনি কি জানেন কীভাবে আমি কম ব্যবহার করে একটি ধারক (অদৃশ্য এটিকে বিভাগ। বিভাগগুলি) 4 টি সমান ভাগে ভাগ করতে পারি?

— শন স্পেন্সার

@ শ্যাশনস্পেন্সার: লাইনের মধ্যে অনেকটা অস্পষ্টতা রয়েছে। আপনি কী সমাধান করতে চাইছেন তা চিত্রিত করে কোনও জেএসফিডেল তৈরি করতে পারেন? আমি ব্যবহারের কেসটি অনুমান করার চেষ্টা করতে পারি, তবে পুরো বিবরণ না জেনে আমি বাধা পেয়েছি এবং আমি নিশ্চিত যে আপনি কীভাবে তা জানেন — আপনার সবচেয়ে খারাপ বাধাগুলি আপনাকে শেষ পর্যন্ত মনস্তাত্ত করে তোলে।

— নচিকেতা

আমি পরিপক্কতায় পদত্যাগ করতে চাই না। যেহেতু আমি একটি সোজা সিএসএস সমাধানের জন্য যাচ্ছি, এবং যেহেতু আমি উত্তরগুলির একটি ব্যবহার করে জিনিসগুলি কাজ করতে সক্ষম হয়েছি, আমি আপাতত ভাল। যদিও একটি জেএসফিডাল উদাহরণটি দেখার জন্য অফার দেওয়ার জন্য আপনাকে ধন্যবাদ। অনেক প্রশংসিত.

— শন স্পেন্সার

Answer 2

আমার মনে width: -moz-calc(25% - 1em);হয় আপনি যা খুঁজছেন এবং আপনি এই লিঙ্কটি আরও কোনও সহায়তার জন্য চেহারা দিতে চাইতে পারেন

Answer 3

অথবা, আপনি মার্জিন অ্যাট্রিবিউটটি এর মতো ব্যবহার করতে পারেন:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Comments

ওপি 100% প্রস্থের চেয়ে কম প্রস্থ 10px চায়। আপনার সিএসএস এটি করে না। এটি এটি 100% এর চেয়েও প্রশস্ত করে তুলবে ।

— অ্যান্ড্রু বারবার

Answer 4

এটা চেষ্টা কর :

width:auto;
margin-right:50px;