আমার প্রায় 10 imgs এর সারি সহ একটি পৃষ্ঠা রয়েছে । এইচটিএমএলটির পঠনযোগ্যতার জন্য, আমি প্রতিটি imgট্যাগের মধ্যে একটি লাইন ব্রেক ফেলতে চাই , তবে এটি করার মাধ্যমে চিত্রগুলির মধ্যে সাদা স্থান স্থান করে দেয় যা আমি চাই না। ট্যাগগুলির মাঝে ভাঙার পরিবর্তে আমি আর কিছু করতে পারি?
সম্পাদনা: আমার এখন পর্যন্ত যা আছে তার একটি স্ক্রিনশট এখানে। আমি পিএইচপি ব্যবহার করে বইয়ের মেরুদণ্ডের চিত্রগুলি এলোমেলো সংমিশ্রণে প্রদর্শন করতে চাই। এ কারণেই আমার আলাদা imgট্যাগ দরকার ।
উত্তর:
আপনি সিএসএস ব্যবহার করতে পারেন। প্রদর্শন স্থাপন: ব্লক, বা ভাসা: চিত্রগুলির বাম আপনি আপনার নিজের ব্যবধানটি নির্ধারণ করতে পারবেন এবং এইচটিএমএলটিকে আপনি চান তবে ফর্ম্যাটটি এমনভাবে প্রভাব ফেলবে যা সঠিক বা উপযুক্ত নাও হতে পারে।
অন্যথায় আপনি ইনলাইন সামগ্রী নিয়ে কাজ করছেন তাই এইচটিএমএল ফর্ম্যাট করা গুরুত্বপূর্ণ - কারণ চিত্রগুলি কার্যকরভাবে শব্দের মতো কাজ করবে।
দুঃখিত এটি যদি পুরানো হয় তবে আমি একটি সমাধান খুঁজে পেয়েছি।
font-size0 এ সেট করার চেষ্টা করুন। সুতরাং চিত্রগুলির মধ্যে সাদা স্পেসগুলি 0 প্রস্থে হবে এবং চিত্রগুলি প্রভাবিত হবে না।
এটি সমস্ত ব্রাউজারে কাজ করে কিনা জানেন না তবে আমি এটি ক্রোমিয়াম এবং এর সাথে কিছু <li>উপাদান দিয়ে চেষ্টা করেছি display: inline-block;।
emইউনিট ব্যবহার করছে এমন লেআউটগুলি ভেঙে দেবে ।
font-size0 এ সেট করার অর্থ আপনি emসেই বিন্দুর পরে স্কেলযোগ্য ডিজাইনের জন্য ইউনিটটি ব্যবহার করতে পারবেন না । কিছু লোকের জন্য, এই উত্তরটি অকেজো।
আপনি মন্তব্য ব্যবহার করতে পারে।
<img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="...">যদিও আমি পাশাপাশি সিনেমিক্সের একাধিক চিত্রের চিত্র নিয়েছি তা নিয়ে ভাবছিলাম।
font-size:0অনেক ক্ষেত্রেই ভয়াবহ কারণ আপনি উত্তরাধিকার ছেড়ে দিয়েছেন। হ্যাঁ, আপনি remইউনিটগুলি ব্যবহার করতে পারেন তবে তবুও, আপনার মিডিয়া প্রশ্নগুলি সেই উপাদানটির জন্য কাজ বন্ধ করবে এবং আপনাকে সেগুলি সমস্ত সংশোধন করতে হবে
সিএসএস দিয়ে আনুমানিক স্টাফ না করে আপনার কাছে দুটি বিকল্প রয়েছে। প্রথম বিকল্পটি হ'ল কেবল ট্যাগগুলি থেকে শ্বেতস্পেসের শিশুদের সরাতে জাভাস্ক্রিপ্ট ব্যবহার করা use যদিও একটি সুন্দর বিকল্প হ'ল ট্যাগগুলির ভিতরে কোনও অর্থ না রেখেই হোয়াইটস্পেসের অস্তিত্ব থাকতে পারে তা ব্যবহার করা। তাই ভালো:
<div id="[divContainer_Id]"
><img src="[image1_url]" alt="img1"
/><img src="[image2_url]" alt="img2"
/><img src="[image3_url]" alt="img3"
/><img src="[image4_url]" alt="img4"
/><img src="[image5_url]" alt="img5"
/><img src="[image6_url]" alt="img6"
/></div>ফ্লেক্সবক্স সহজেই এই পুরানো সমস্যাটি সমাধান করতে পারে:
.image-wrapper {
display: flex;
}ফ্লেক্সবক্স সম্পর্কে আরও তথ্য: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
{ flex-direction: row; flex-wrap: nowrap; }আরও পাঠযোগ্যতার জন্য যুক্ত করা যেতে পারে।
flex-direction: rowএবং flex-wrap: nowrap, তারা যাইহোক ডিফল্ট। এটি সহজ রাখুন সাধারণত সেরা! এছাড়াও, বেশিরভাগ সময় ব্যবহারকারী বাস্তবে চাইবে flex-wrap: wrap।
অত্যধিক গবেষণা, পরীক্ষা এবং ত্রুটির পরেও আমি এমন একটি উপায় খুঁজে পেয়েছি যা ভাল কাজ করে বলে মনে হচ্ছে এবং ম্যানুয়ালি ফন্টের আকারটি শিশুদের উপাদানগুলিতে ম্যানুয়ালি পুনরায় সেট করতে হবে না, যাতে পুরো ডকটিতে আমার একটি মানকযুক্ত ইম ফন্টের আকার থাকতে পারে ।
ফায়ারফক্সে এটি মোটামুটি সহজ, কেবলমাত্র word-spacing: -1emমূল উপাদানকে সেট করা। কোনও কারণে, ক্রোম এটিকে উপেক্ষা করে (এবং যতদূর আমি পরীক্ষা করে দেখলাম, এটি মূল্য নির্বিশেষে ব্যবধান শব্দের উপেক্ষা করে)। সুতরাং এটির পাশাপাশি আমি letter-spacing: -.31emপিতামাতাকে এবং যুক্ত করবletter-spacing: normal বাচ্চাদের সাথে যুক্ত করব। কোনও ইমের এই ভগ্নাংশটি কেবলমাত্র স্থানের আকার যদি আপনার ইমের আকার মানক করা হয় । ফায়ারফক্স, পরিবর্তে, বর্ণ-ব্যবধানের জন্য নেতিবাচক মানগুলিকে উপেক্ষা করে, তাই এটি স্পেসিং শব্দটিতে যুক্ত করবে না won't
আমি এটি ফায়ারফক্স ১৩ (উইন্ডো / উবুন্টু, অ্যান্ড্রয়েডে 14), গুগল ক্রোম 20 (উইন / উবুন্টু), আইসিএস 4.0.4 এবং আইই 9 এ অ্যান্ড্রয়েড ব্রাউজারে পরীক্ষা করেছি এবং আমি এই কথাটি বলতে প্ররোচিত হই যে এটি সাফারিতেও কাজ করতে পারে, কিন্তু আমি আসলে জানি না ...
এখানে একটি ডেমো http://jsbin.com/acucam
word-spacing: -1emশৈলী Chrome- এর বর্তমান সংস্করণ শব্দের ওভারল্যাপ করা বলে মনে হয়।
আমি খুব দেরী করেছি (আমি কেবল একটি প্রশ্ন জিজ্ঞাসা করেছি এবং সম্পর্কিত বিভাগে পাতলা দেখতে পেয়েছি) তবে আমি মনে করি প্রদর্শন: টেবিল-ঘর; একটি ভাল সমাধান
<style>
img {display:table-cell;}
</style>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">কেবল সমস্যাটি এটি আই 7 এবং এর আগের সংস্করণগুলিতে কাজ করবে না তবে হ্যাক দিয়ে স্থিরযোগ্য fix
display: table-*করে এবং পড়েন যেন ব্যবহারকারী কোনও টেবিল নেভিগেট করছে।
নিম্নলিখিত কোডের মতো এই সমস্যাটি সমাধানের জন্য সিএসএস স্টাইলশিট ব্যবহার করুন।
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}ফায়ারফক্স ৩.৫ ফাইনালে পরীক্ষা!
পুনশ্চ. আপনার এইচটিএমএল এটি পছন্দ করা উচিত।
<div id="[divContainer_Id]">
<img src="[image1_url]" alt="img1" />
<img src="[image2_url]" alt="img2" />
<img src="[image3_url]" alt="img3" />
<img src="[image4_url]" alt="img4" />
<img src="[image5_url]" alt="img5" />
<img src="[image6_url]" alt="img6" />
</div>ট্যাগগুলির মাঝে ভাঙার পরিবর্তে আমি আর কিছু করতে পারি?
আসলে তা না. যেহেতু <img>গুলি ইনলাইন উপাদান, এই উপাদানগুলির মধ্যে ফাঁকা স্থানগুলি এইচটিএমএল রেন্ডারকে পাঠ্যের সত্যিকারের স্থান হিসাবে বিবেচনা করবে - রিলান্ড্যান্ট স্পেস (এবং লাইন ব্রেক) কেটে যাবে তবে একক স্পেস হবে টেক্সট উপাদান চরিত্র তথ্য ঢোকানো হবে।
পজিশনিং <img>ট্যাগ একেবারে এই প্রতিরোধ করতে পারি কিন্তু আমি এই যেহেতু এই বিরুদ্ধে পরামর্শ চাই নিজে কিছু পিক্সেল পরিমাপ যা কাজ অনেক হতে পারে ইমেজ প্রতিটি পজিশনিং মানে হবে।
আরেকটি সমাধান হ'ল জায়গাগুলির অপ্রচলিত লাইন ব্রেক ব্যবহার করা। এটি প্রথম দম্পতির উত্তরের মতো এবং এটি উপাদানগুলিকে আস্তরণের বিকল্প উপায়। এটি একটি সুপার-এজ-অপ্টিমাইজেশান কৌশলও কারণ এটি আপনার মার্কআপের জায়গাগুলিকে ক্যারেজ রিটার্নের সাথে প্রতিস্থাপন করে।
<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">নোট করুন যে কোনও কোডে কোনও স্থান নেই। যে জায়গাগুলিতে স্পেসগুলি সাধারণত এইচটিএমএলে ব্যবহৃত হয় সেগুলি গাড়ীর রিটার্নের সাথে প্রতিস্থাপন করা হয়। মন্তব্যগুলি ব্যবহার করা এবং পল ডি ভ্রিজের প্রস্তাবিত হোয়াইটস্পেস ব্যবহারের চেয়ে এটি উভয়ই কম ভার্জোজ।
এই পদ্ধতির জন্য টেক.কমকে ক্রেডিট।
সাদা-স্থান: প্রাথমিক; আমার জন্য কাজ কর.
উপাদানগুলির মধ্যে শ্বেত স্থান কেবলমাত্র HTML সম্পাদকের দ্বারা ভিজ্যুয়াল বিন্যাসের উদ্দেশ্যে রাখা হয়। সাদা স্থান সরাতে আপনি jQuery ব্যবহার করতে পারেন:
$("div#MyImages").each(function () {
var div = $(this);
var children= div.children();
children.detach();
div.empty();
div.append(children);
});এটি শিশু উপাদানগুলিকে পৃথক করে, শিশুদের উপাদানগুলিকে আবার যুক্ত করার আগে যে কোনও সাদা জায়গা রেখে দেয় ars
এই প্রশ্নের অন্যান্য উত্তরের মতো নয়, এই পদ্ধতিটি ব্যবহার করে উত্তরাধিকারসূত্রে প্রাপ্ত CSS displayএবং font-sizeমানগুলি বজায় রাখা নিশ্চিত করে। ব্যবহার করার প্রয়োজন নেই floatএবং clearএরপরে প্রয়োজনীয় যে জটিলগুলি । অবশ্যই, আপনার jQuery ব্যবহার করা প্রয়োজন।
ব্যক্তিগতভাবে আমি গ্রহণযোগ্য উত্তরটি পছন্দ করে বলছি যে এটি করার কোনও সঠিক উপায় নেই, কোনও ফর্মের কৌশল ব্যবহার করে নয়।
আমার কাছে, এটি একটি বিরক্তিকর বিষয় যা আপনাকে মাঝে মাঝে ভাবতে ভাবতে এক ঘন্টা নষ্ট করতে পারে কেন উদাহরণস্বরূপ চেক বাক্সগুলির সারিটি সমস্ত সঠিকভাবে সংযুক্ত হয় না .. তাই আমাকে একটি দ্রুত গুগল নিতে হয়েছিল এবং নিজেই সিএসএস নিয়ম আছে কিনা তা পরীক্ষা করে দেখতে হয়েছিল myself যা আমি মনে রাখিনি ... তবে মনে হয় না :(
পরবর্তী সেরা উত্তরের জন্য, হরফ-আকার ব্যবহার করার জন্য ... আমার কাছে এটি একটি বাজে হ্যাক যা পরে আপনার টেক্সটটি কেন প্রদর্শিত হচ্ছে না তা ভেবে আপনাকে কামড় দেবে।
আমি পিএইচপি দিয়ে সাধারণত অনেকগুলি বিকাশ করি এবং যেখানে আমি চেক বাক্সগুলির গ্রিড তৈরি করছি সেখানে পিএইচপি উত্পন্ন সামগ্রী এই সমস্যাটিকে সরিয়ে দেয় কারণ এটি কোনও ফাঁকা / ব্রেক সন্নিবেশ করে না।
সহজভাবে, আমি পরামর্শ দিই যে সমস্তগুলি একসাথে একক লাইনে থাকা চিত্রগুলির সাথে একত্রে কাজ করতে হবে বা সামগ্রী / চিত্রগুলি উত্পন্ন করতে একটি সার্ভার সাইড স্ক্রিপ্ট ব্যবহার করতে হবে।
উপাদানগুলির মধ্যে একটি সিআর / এলএফ অপসারণ করার পরিবর্তে, আমি এসজিএমএল প্রসেসিং নির্দেশ ব্যবহার করি কারণ মিনিফায়ারগুলি প্রায়শই মন্তব্যগুলি সরিয়ে দেয়, তবে এক্সএমএল পিআই নয়। যখন পিএইচপি পিআই পিএইচপি দ্বারা প্রক্রিয়া করা হয়, তখন সিআর / এলএফ এর মধ্যে পিআইকে সম্পূর্ণরূপে অপসারণ করার অতিরিক্ত সুবিধা থাকে, এভাবে কমপক্ষে 8 বাইট সংরক্ষণ করা যায়। আপনি যেকোন যথেচ্ছ বৈধ নির্দেশের নাম ব্যবহার করতে পারেন যেমন এক্স (এইচটি) এমএলে দুটি বাইট সংরক্ষণ করতে পারেন।
কোয়ান্টিনের উত্তরে অনুপ্রাণিত হয়ে , আপনি পরবর্তী ট্যাগটি শুরুর পাশে ক্লোজিং >ও রাখতে পারেন।
<img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."/>শব্দার্থকভাবে বলতে গেলে, অর্ডারযুক্ত বা আনর্ডারড তালিকা ব্যবহার না করে সিএসএস ব্যবহার করে উপযুক্তভাবে স্টাইল করা ভাল না?
<ul id="[UL_ID]">
<li><img src="[image1_url]" alt="img1" /></li>
<li><img src="[image2_url]" alt="img2" /></li>
<li><img src="[image3_url]" alt="img3" /></li>
<li><img src="[image4_url]" alt="img4" /></li>
<li><img src="[image5_url]" alt="img5" /></li>
<li><img src="[image6_url]" alt="img6" /></li>
</ul>সিএসএস ব্যবহার করে, আপনি যেভাবে চান স্টাইল করতে সক্ষম হবেন এবং বইগুলির মধ্যে সাদা স্থানকে সরিয়ে ফেলবেন।
{strip}। অন্যান্য টেম্পলেট ইঞ্জিনগুলিতে একই রকম ট্যাগ থাকা উচিত।